CSS3 Hover effect makes possible several changes to the single elements by adding many features to it, for example It includes feature like transition, transform and animation. That will add new effect to the simple div. The :hover selector is used to select elements when a user mouse over them in order to have good effects. Here in this blog a simple use of hover is explained in a beautiful manner. Hope readers will like this hover effect!
Html Source Code:-
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Hover Effect</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather' rel='stylesheet' type='text/css'>
</head>
<h1 style="font-family: 'Raleway', sans-serif;"> CSS3 hover<span id="hover"> effects/</span></h1>
<p style="font-family: sans-serif; color: #fff; padding-left: 10px;">Through CSS everything is possible.</p>
<div class="view view-tenth">
<img src="http://static1.squarespace.com/static/55ac6d80e4b0a964784b2f80/t/5703eb0cb09f95f41391ea85/1459874573710/j07SfQZ.png" />
<div class="mask">
<h2>The Only Living Boy in New York</h2>
<p>Words and such, a whole lot more of muh flippin' words.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
</body>
</html>
CSS Source Code:-
html {
min-height: 100%;
}
body {
background: radial-gradient(ellipse at bottom left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25), rgba(42, 60, 87, 0.4)), linear-gradient(135deg, #670d10, #092756);
}
h1 {
color: white;
padding-left: 10px;
}
#hover {
color: rgba(188, 175, 204, 0.9);
}
.view {
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
font-family: Raleway, serif;
padding: 10px;
/*background: rgba(0, 0, 0, 0.8);*/
margin: 20px 0 0 0
}
.view p {
font-family: Merriweather, serif;
font-style: italic;
font-size: 14px;
position: relative;
color: #fff;
padding: 0px 20px 0px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
font-family: Raleway, serif;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
.view-tenth img {
transform: scaleY(1);
transition: all .7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
transition: all 0.5s linear;
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(0);
color: #333;
transition: all 0.5s linear;
opacity: 0;
}
.view-tenth p {
color: #333;
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
padding-
}
.view-tenth a.info {
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
transform: scale(10);
opacity: 0;
}
.view-tenth:hover .mask {
opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info {
transform: scale(1);
opacity: 1;
}
0 Comment(s)