CSS hover effects , Opacity , Overlay

CSS hover effects

CSS hover effects gives us the ability to animate changes to a CSS property value. In the following lesson we are going to follow that up with different kinds of effects specifically built for use with images. However, these effects can make your site feel much more dynamic and alive. The effects we will be using today all use code that is supported by modern browsers.

Simple Hover Effects

The following code shows how to show a hover effect on Box Shadow.


Mouse over here

Source Code

<!DOCTYPE html> <html > <head> <style type="text/css"> .box { width: 150px; border: 1px solid #9325BC; padding: 10px; } .box:hover { -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; } </style> </head> <body> <div class="box"> Move your mouse here </div> </body> </html>

Image Hover Effects

The following CSS code shows how to present an Image hover effects.

Move your mouse over the Image.

Source Code

More about CSS Shadow....CSS Shadow Examples

<!DOCTYPE html> <html > <head> <style type="text/css"> .imgBox { width: 441px; height: 248px; background: url(http://www.corelangs.com/css/box/img/water.jpg) no-repeat; } .imgBox:hover { -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; } </style> </head> <body> <div class="imgBox"> </div> </body> </html>

CSS Image Opacity / Transparency

Opacity is the opposite of transparency, allowing no light to pass through. You can create transparent images in CSS with the opacity property .

CSS Image fade effect

Image transparency

Image Blur effect

img { opacity: 0.3; }

Image Transparency - Hover Effect

The following CSS program shows how to impliment Opacity on an Image while mouse hover. When you mouse over the image, you can see the image is fading.

Image Opacity on Hover

Move your mouse over the Image.

Source Code

<!DOCTYPE html> <html > <head> <style type="text/css"> .pic{ width:190px; height:190px; opacity: 1; filter: alpha(opacity=100); background: url(http://www.corelangs.com/css/box/img/duck.png) no-repeat; } .pic:hover { opacity: 0.3; filter: alpha(opacity=30); } </style> </head> <body> <div class="pic"> </div> </body> </html>

Image Hover Text Overlay

Layering images over one another is a great way to give an Image a new Look. Here, the CSS code that display text on image while mouse hover

Move your mouse over the Image.

The tiger is the largest cat species, reaching a total body length of up to 3.3 m and weighing up to 306 kg. Its most recognizable feature is a pattern of dark vertical stripes on reddish-orange fur with a lighter underside.

Source Code

More about CSS Overlay....CSS Overlay Techniques

<!DOCTYPE html> <html > <head> <style type="text/css"> .pic{ width:400px; height:217px; background: url(http://www.corelangs.com/css/box/img/tiger.png) no-repeat; } .text{ width:340px; height:217px; background:#FFF; opacity:0; } .pic:hover .text { opacity:0.6; text-align:justify; color:#000000; font-size:20px; font-weight:700; font-family:"Times New Roman", Times, serif; padding:30px; } </style> </head> <body> <div class="pic"> <div class="text"> The tiger is the largest cat species, reaching a total body length of up to 3.3 m and weighing up to 306 kg. Its most recognizable feature is a pattern of dark vertical stripes on reddish-orange fur with a lighter underside. </div> </div> </body> </html>

CSS hover image swap

The following CSS code shows how to change an Image on mouse over. On mouse hover one div containging image is placed over the other image.

Move your mouse over the Image.

Source Code

How to Full Page Overlay Window....CSS Fullscreen overlay

<!DOCTYPE html> <html > <head> <style type="text/css"> .imgBox { width: 191px; height: 191px; background: url(http://www.corelangs.com/css/box/img/duck.png) no-repeat; } .imgBox:hover { width: 191px; height: 191px; background: url(http://www.corelangs.com/css/box/img/peng.png) no-repeat; } </style> </head> <body> <div class="imgBox"> </div> </body> </html>

Image link change on hover

The following source code shows how to change the image link while on mouse hover.

Move your mouse over the Image Link.

Source code

<!DOCTYPE html> <html > <head> <style type="text/css"> .urlImg { width: 185px; height:185px; display:block; background-image: url('img/duck.png'); } .urlImg:hover { background-image: url('img/peng.png'); } </style> </head> <body> <a href="http://www.corelangs.com" class="urlImg" title="Corelangs link"></a> </body> </html>

CSS Div Hover

You can change the background color of a Div on Hover. The following CSS code shows how to change div background color on hover.

Move your mouse over the Div.


CSS Div hover effects

Source code

<!DOCTYPE html> <html > <head> <style type="text/css"> .picColor{ width:320px; height:240px; border:5px solid #000000; } .picColor:hover { background:#FF2400; width:320px; height:240px; } </style> </head> <body> <div class="picColor"> </div> </body> </html>

CoreLangs.com








Home  |  Terms of Use  |  About Us
CoreLangs.com ©: 2014
All Rights Reserved. All other trademarks are property of their respective owners.