HTML and CSS Reference
In-Depth Information
Figure 20-20.
The left image disappears behind the other one when scaled up
4. To overcome this problem, you need to make the images relatively positioned and
give them a
z-index
. Amend the
scaleimg
class like this:
.scaleimg {
margin: 10px;
padding: 10px;
background-color: #FFF;
border: 1px solid #000;
transition: ease-in-out 1s;
position: relative;
z-index: 1;
}
5. To make sure the hovered image is in front, give the
:hover
pseudo-class a
z-index
of
2
:
.scaleimg:hover {
transform: scale(1.5);
z-index: 2;
}
6.
Test the page again. in some browsers, the left image remains behind the other
one right until the end of the transition when it suddenly pops to the front. This is
because
z-index
must be an integer. The gap between
1
and
2
is too small for
a smooth transition. Change the
z-index
in the
:hover
pseudo-class to
10
. This
produces a much smoother effect in both directions.
7.
To solve the problem of the text being obscured, you need to add a top margin to the
paragraph when the images are being hovered over. The images are in
a
<div>
with
the iD
images
, so you can use the adjacent sibling combinator (see Chapter 13) to
add a transition and the top margin like this:
