| Hover Effect Transition Using CSS - An example of a hover effect and transition using transforms. Example: View Code Demo |
<!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>
|
Scroll