Hey guys,
one more question: I added a costume CSS code with a coding element into my weebly site. While it shows the regular size in weebly's editor, it shows very small sized when i publish the site.
Here is the code i used for my textoverlay:
<style>
.container {
position: relative;
width: 100%;
height: auto;
}
.image {
max-width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #696969;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
transparency: 0.5;
opacity: 0.95;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: #ffffff;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="https://www.weebly.com/editor/uploads/1/0/1/0/101069206/custom_themes/623822383402346293/files/gift.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST <br></div>
</div>
</div>And here are 2 pictures showing my problem:
maybe anyone can help me?
Thank you so much in advance, greets
Nico
Hi @braybin
thanks for your answer. No there are no widgets or spacers around these pictures. But sometimes it happens a miracle: Today it works fine, i did not change anything 🙂
But now i have another problem: when i want to arrange more icons/pictures in a row or on one site they all do the overlay at the same time, independent which one gets hovered by the cursor.
Any idea to solve? 
Maybe because it is still early in the morning I can't figure out why your code isn't working properly and the answer I have does. It all comes down to your CSS selector. As it turns out, despite your images being in separate container classes, when you hover over one it is changing all overlay classes. If instead you change what you have to:
.container:hover > .overlay
it should only activate overlay on one image at a time based on the hover of its parent container. This is an immediate child selector which says only the overlay that is immediately after the container that is hovered should have this change. Even though your other overlays are not nested, it was still targeting them as if they were which is what I couldn't figure out. Either way I hope this helps
hej @braybin
sorry, i was so busy the last days.. and thank you for your tipp. i tried this and it did not worked. i changed the code to:
<style>
.container {
position: relative;
width: 100%;
height: auto;
}
.image {
max-width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #696969;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
transparency: 0.5;
opacity: 0.95;
}
.overlay {
height: 100%;
}
.text {
color: #ffffff;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="https://www.weebly.com/editor/uploads/1/0/1/0/101069206/custom_themes/623822383402346293/files/gift.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST <br></div>
</div>
</div>i just deleted the section
.container:hover
or did i misunderstand you?
Greets, nico
