CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Martin Dvoracek
Martin Dvoracek

Reputation: 1738

Overlaying effect for multiple pictures

I've got this code, which works for a single picture. Nevertheless I wasn't able to figure out, how to adjust the code to make it work, when I'd like to have the same effect for n pictures. Does anybody have any idea, how to generalize this css? Or do I have to use different approach?

.cat-image,
.cat-image img {
    width: 400px;
    height: 400px;    
}

.top {
    position: relative;
    opacity: 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; 
}

.top .text,
.top button {
    position: absolute;
}

.top .text {
    bottom: 40px;
    left: 30px;
}
.top button {
    bottom: 10px;
    left: 30px;
}

.top:hover {
    opacity: 1;
}

.bottom {
    position: absolute;
    top: 0;
}

Upvotes: 1

Views: 54

Answers (1)

VVV
VVV

Reputation: 7593

You need to set the position of your .container to relative in your CSS in order to avoid for your multiple images to overlap.

.container {
  position:relative;    
}

and if you want you images to float one next to the other, all you have to do is add float:left;

.container {
  position:relative; 
  float:left;
}

Look at this fiddle. Is this what you are looking for?

Upvotes: 2

Related Questions