A display:flex property is bugging my image

Asked

Viewed 59 times

0

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

After I added this line, along with the display: flex. My image increases by 4px at the bottom when I hover over. And I don’t know why it happens, I need to fix it.

I added these two lines because I want to put a text inside the image, if there’s another way to do that I don’t know. I saw it 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 this code there that I put to illustrate my problem, I don’t know why the text n is inside the image, but okay, in my code here it is in the right image. The problem is the image that increases the size below.

html css

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>

  • N worked, with your code the image is now increasing on top as well. And the text should be down on the lower left side. But see the attempt.

  • Can you explain that part of increasing up?

  • Below your comment there is a button that executes your script. You see there? That besides increasing the size of the photo below also increases above. If you are not seeing there, it is not the fault of the browser then?

  • I’m sorry, but I don’t understand, so you want to take this animation of enlarging the photo?

  • I put a code in the image for when I passed the mouse on it would zoom right?! So far so good, only that I also needed to put a text on top of the photo, so I used the properties of the display: flex. And one of them the align-items: flex-end, made the image a "bugger", the image increases its size by about 4px at the bottom. And in your code the image increases not only in the bottom but also in the top.

  • Maybe I should take this display: flex. And find another way to put the text in the image, you know another method? In my case I n can simply adjust the text in the image with the margin pq I have more than one image and with texts of different sizes.

  • I edited the code, see if it is the problem resolution, determined a size for the image div, not leaving "bugado" the transition

  • Solved, thank you very much for the help colleague!

Show 3 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.