css (html) 中图片叠加的问题

Question

I have problem with adding overlay on image in my html project. It should looks like overlay coming from bottom of image when it's hovered, but instead it's only like link on all the image. Here is code from html and css:

 .tile5 { width: 480px; margin: 10px; height: 304px; float: left; } .overlay { position: relative; width: 480px; height: 304px; } .overlay .link { position: absolute; display: block; width: 100%; height: 100%; background-color: #111; left: 0px; top: 0px; opacity: 0; transition: opacity 0.5s ease-in-out; } .overlay:hover .link { opacity: 0, 8; }

 <div class="square"> <div class="tile5"> <div class="overlay"> <a href="#"> <img src="grafika/obraz.jpg" style="width: 480px; height: 304px; border-radius: 10px;" /> </a> <a href="#" class="link">tekkst teskttekkst teskttekkst teskttekkst teskttekkst teskt</a> </div> ...other element in div 'square' </div>

I hope someone will help;)

Answer 1

You could try something like this:

 .tile5 { width: 480px; margin: 10px; height: 304px; float: left; position:relative; } .overlay { position: relative; width: 480px; height: 304px; } .overlay .link { position: absolute; display: block; background-color: rgba(0, 0, 0, 0.4); left: 0px; top: 40%; opacity:0; transition: opacity 0.5s ease-in-out; z-index:99999; color:white; padding:10px 20px; text-decoration:none; } .overlay:hover .link { opacity: 0.8; }

 <div class="square"> <div class="tile5"> <div class="overlay"> <a href="#"> <img src="https://images.pexels.com/photos/206959/pexels-photo-206959.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width: 480px; height: 304px; border-radius: 10px;" /> </a> <a href="#" class="link">tekkst teskttekkst teskttekkst teskttekkst teskttekkst teskt</a> </div> ...other element in div 'square' </div>

Answer 2

Looks like your HTML structure a bit off. The tag with class overlay.

Here's how I would go about it. I think you are trying to have an image caption visible on hover

HTML

 <div class="square">
        <a href="#"> 
          <img src="grafika/obraz.jpg" style="width: 480px; height: 304px; border-radius: 10px;"/>
          <span>Caption Here</span>
        </a>
</div>

CSS

.square{
    position: relative;
    width: 480px;
    height: 304px;
    float: left;
}
.square a span{
  background:#efebeb;
  max-width: 480px;
  width:100%;
  color:#000;
  padding:20px 0px;
   position: absolute;
   left:0;
   bottom:0;
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
   text-align:center;
}
.square a:hover span{
  opacity: 0.8;
}

Hope this helps