Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Image Effects >> Hover Effect Transition Using CSS


Code Snippet </> Info


Snippet Name: Hover Effect Transition Using CSS

Description: An example of a hover effect and transition using transforms.

Example: View Code Demo

Note: See the notes within the source code to change the image to yours.

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 22:36:52

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!doctype html> <html> <head> <title>Hover Effect Transition Using CSS</title> <style> /* Begin HTML5 CSS3 Hover Effect Transition Using CSS */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ body {font-family:verdana,arial,ms sans serif; font-size:90%; color:#000000;background:#e6e6e6;text-shadow:0px 1px 0px rgba(0,0,0,0.4);} .view { width:320px; /* set the width of the image being used */ height:256px; /* set the height of the image being used */ margin:10px; /* set the margin */ float:left; border:10px solid #fff; /* set the border width and color value */ overflow:hidden; position:relative; text-align:center; -webkit-box-shadow:1px 1px 2px #e6e6e6; /* lets give it a shadow and color value */ -moz-box-shadow:1px 1px 2px #e6e6e6; box-shadow:1px 1px 2px #e6e6e6; cursor:default; background:#fff ; } .view .mask,.view .content { width:320px; /* repeat the width of the image being used */ height:256px; /* repeat the height of the image being used */ position:absolute; overflow:hidden; top:0; left:0; } .view img { display:block; position:relative; width:320px; /* repeat the width of the image being used */ } .view-fifth img { -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .view-fifth .mask { background-color:#B4CFEC; -webkit-transform:translateX(-320px); /* set the width of the image being used for all 320px below */ -moz-transform:translateX(-320px); -o-transform:translateX(-320px); -ms-transform:translateX(-320px); transform:translateX(-320px); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .view-fifth h2 { background:rgba(255, 255, 255, 0.5); color:#000; -webkit-box-shadow:0px 1px 3px rgba(159, 141, 140, 0.5); -moz-box-shadow:0px 1px 3px rgba(159, 141, 140, 0.5); box-shadow:0px 1px 3px rgba(159, 141, 140, 0.5); } .view-fifth p { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; color:#333; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear; } .view-fifth:hover .mask { -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -o-transform:translateX(0px); -ms-transform:translateX(0px); transform:translateX(0px); } .view-fifth:hover img { -webkit-transform:translateX(320px); /* set the width of the image being used for all 320px below */ -moz-transform:translateX(320px); -o-transform:translateX(320px); -ms-transform:translateX(320px); transform:translateX(320px); } .view-fifth:hover p { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; } div.words { position:absolute; top:300px; left:20px; width:670px; height:200px; overflow:hidden; } .left { padding:0 10px 0 10px; text-align:left; } </style> </head> <body> <div class="view view-fifth"> <img src="https://farm3.staticflickr.com/2932/14240497324_34fd2e92e9_n.jpg" /> <div class="mask"> <h2>Beautiful Art</h2> <p>A Beautiful picture taken by <a href="https://www.flickr.com/photos/maoby/">Maoby</a></p><br /> <p class="left">Create your own hover effect transition using this CSS code snippet.</p> </div> </div> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_148.html">Hover Effect Transition Using CSS</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library