An image conveys a lot more than words but an interactive image with some extra glitter will make the user experience amazing. Earlier, images were displayed without much modification or if it was done, then it was done using Javascript. Javascript helped in providing basic effects but never gave rise to creative ideas as it was difficult to implement. But with advent of CSS3, the designers could deliver better experience with little effort as implementation became easier.
So here, we are going to enhance the viewing of an image by providing information and links on hovering mouse pointer above it in a beautiful way. Checkout the demo here.
It involved no Javascript. It has been done using CSS3. Before explaining in detail, introduction of transition and transform will be helpful.
Transition (CSS3) helps in defining the action time. Suppose some CSS styling is to be changed and the effect has to take place in a particular amount of time, it is defined using transition.
Many other features like transition-delay, transition-duration etc can also be specified for more customized actions and animations. So we begin by declaring simple HTML tags.
Transform (CSS3) helps in changing the original position of an element without disturbing the attributes like width , height, margin, padding and other css elements. It has options like translate, scale, skew, rotate, 3D transitions etc. It is intuitive and easily understandable while looking at the code.
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div class="hove hove-first">
<img src="pic.jpg" />
<div class="mask">
<h2>Title</h2>
<p>Your Text</p>
<a href="#" class="info">Read More</a>
</div>
</div>
</body>
</html>
It has a div with hove class and its subsidiary. Inside this div, the img tag with the image to be displayed, title, introductory text and link to 'Read More' is specified. We begin defining our css by structuring the basic design elements of the div.
.hove {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #ffa no-repeat center center
}
.hove .mask, .hove .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.hove img {
display: block;
position: relative
}
.hove h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 2, 0, 0.8);
margin: 20px 0 0 0
}
.hove p {
font-family: Arial, serif;
font-style: italic;
font-size: 15px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.hove a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
Now we proceed on to define the change in css when the mouse is away from the image ie in non-hovering state. in this part we will also define the transition time of such states if the change occurs while hovering.
For image, we define the transition to be linear and to be done in 0.2 seconds (without any acceleration)
.hove-first img {
transition: all 0.2s linear;
}
On hover, the div has a different background color with the animation speed accelerated in the beginning and slowing down at the end which is specified by ease-in-out option all to be done in 0.4 seconds.
.hove-first .mask {
opacity: 0;
background-color: rgba(124,100,9, 0.7);
transition: all 0.4s ease-in-out;
}
Note: The opacity has been set to 0 because these are the effects which has to take place when the image is hovered.
Similarly other properties are also defined.
.hove-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.hove-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.hove-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
translateY changes the position as specified.
Now since we have defined the the final and initial css styling with time and speed specifications too. The next step is the initiation of animations. This event will be handled by hover handler of CSS3. We now define the hover css.
The box shadow will change and its color too. Note that the time for this transition has been specified already (0.2s) with ease-in-out effect.
.hove a.info:hover {
box-shadow: 0 0 7px #000
}
Similarly, the image is scaled to 110% of its size.
.hove-first:hover img {
transform: scale(1.1);
}
Now we make visible all the elements by setting the opacity to 1. On un-hovering the opacity changes to 0 once again.
.hove-first:hover .mask {
opacity: 1;
}
.hove-first:hover h2,
.hove-first:hover p,
.hove-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
The animation is given more effects by delaying the transition by some time for 2 elements using transition-delay option.
.hove-first:hover p {
transition-delay: 0.1s;
}
.hove-first:hover a.info {
transition-delay: 0.2s;
}
The complete code at github.
That's it. The image will animate as soon as it is hovered. So we learn that defining endpoints, animation speed and timing and little imagination can create wonderful effects on an image. Certainly the image says a lot more tempting user to read more on the subject. We will come back with more effects.
Thanks !