CODEWITHSUNDEEP
htmlcssresponsive
Kévin Oudot
Kévin Oudot

Reputation: 43

CSS - position relative with responsive height

I'm trying to make a hover effect on my images, with full css but I have a problem with the position:relative on my container

<div class="cf">
  <img class="bottom" src="img/productions/Page-2.jpg" />
  <img class="top" src="img/productions/Page-1.jpg" />
</div>

.cf {
  position:relative;
  height:281px;
  margin:0 auto;
}

.cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.cf img.top:hover {
  opacity:0;
}

But if I don't set height on my .cf, all the .cf overlap. The problem is that I cannot set the height to be responsive, and while resizing the window, it lets a margin between others .cf : http://les.webmaster.free.fr/alicialegoff/productions.html

Is there a way to correct this and make it responsive ?

Thank you

Upvotes: 1

Views: 2082

Answers (1)

Filip Růžička
Filip Růžička

Reputation: 156

You need to avoid absolute px values if you want to make this responsive. One way to work around this is to use zero height and a percentage-based padding for the container to maintain the aspect ratio, like this:

.cf {
    position:relative;
    height: 0;
    padding-bottom: 40%;
    margin: 0 auto;
}

Upvotes: 1

Related Questions