HTML and CSS Reference
In-Depth Information
.post-image
{
position
:
absolute
;
top
:
0
;
left
:
0
;
background-color
:
#bbb
;
}
.post-title
{
color
:
#037072
;
}
Here, we've set up the post's wrapper with
position:relative
and with enough padding on
the left side to absolutely position the image to the left of our post. We've also added a
background color to our image; so now the positive space in our PNG shows up as light gray.
Next, let's add some hover effects:
.post-title:hover
{
color
:
#d63c25
;
}
.post-title:hover .post-image
{
background-color
:
#f04e36
;
}
Now, when we hover over the title or the image, both will change color.
We can take this effect a step further by animating the transition:
.post-image
{
-webkit-transition
:
background-color 400ms ease-in
;
-moz-transition
:
background-color 400ms ease-in
;
transition
:
background-color 400ms ease-in
;
}
.post-title
{
