A display property: flex is bugging my image

Navigation
0

The problem is in align-items: flex-end.

After I added this line, along with the display: flex. My image increases by 4px below when I hover the mouse over. And I do not know why this happens, I need to figure it out.

I've added these two lines because I want to put a text inside the image, if you have another way of doing this I do not know. I've seen this here in stackoverflow, in another question.

CSS: 

.img-container{
    width: 300px;
    height: 200px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;  
}

.img-container img{
    width: 100%;
    height: 100%;
   -webkit-transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
}

.img-container:hover img{
   -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.texto{
    position: absolute;
    color: #ffffff;
}
.img-container h4{
position: absolute;
width: 600px;
text-shadow: 1px 1px 2px black;
}

HTML: 

<!DOCTYPE html>
<html>
<head>
    <title>sas</title>
    <link rel="stylesheet" type="text/css" href="sis.css">
</head>
<body>
   <div class="img-container">

    <a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"alt="lobo.html"></a>

    <h4><a href="#" class="texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto">Texto</a></h4>

   </div>
</body>
</html>

In that code I put it to illustrate my problem, I do not know why the text is not inside the image, but okay, in my code here it is in the right image. The problem is the image that increases the size down.

    
asked by anonymous 23.08.2018 / 03:42

1 answer

1

See if it solves the problem: 

#img-container{
    width: 300px;
    height: 200px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
#imagem{
    width: 300px;
    height: 200px;
}
#imagem img{
    width: 100%;
    height: 100%;
   -webkit-transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    opacity: 0.5;
}
#imagem:hover img{
   -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
#texto{
    position: absolute;
}
#texto a{
    color: #FFF;
    text-shadow: 1px 1px 2px black;
    text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
   <title>sas</title>
   <link rel="stylesheet" type="text/css" href="sis.css">
   <style type="text/css">
   </style>
</head>
<body>
   <div id="img-container">
      <div id="imagem">
         <a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"alt="lobo.html"></a>
      </div>
      <div id="texto">
         <a href="#" class="texto">Digite aqui o texto que você deseja</a>
      </div>
   </div>
</body>
</html>
    
23.08.2018 / 07:14
Form via GET Code Correction in C