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;
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.
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:
Search WWH ::

Custom Search