How to move an html label using css transitions

Question:

I would like to move the label when hovering over the image

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WOOOW</title>
    <style media="screen">
        img{
            width:100px;
            height: 100px;
            transition: width 2s, height 2s;
        }
        img:hover{
            width: 200px;
            height: 200px;
        }
        label{
            margin-bottom: 0px;
            transition: margin-bottom 2s;
        }
        img:hover > label{
            margin-bottom: 60px;
        }
    </style>
</head>
<body>
    <h1>Titulo</h1>
    <hr>
    <div class="container">
        <h2>Item 1</h2>
        <img src="http://via.placeholder.com/200x200" alt="">
        <label>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, quaerat!</label>
        </img>
    </div>
    <div>
        <h2>Item 2</h2>
        <img src="http://via.placeholder.com/200x200" alt="">
        <label>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, quaerat!</label>
    </div>
    <div>
        <h2>Item 3</h2>
        <img src="http://via.placeholder.com/200x200" alt="">
        <label>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, quaerat!</label>
    </div>
    <div>
        <h2>Item 4</h2>
        <img src="http://via.placeholder.com/200x200" alt="">
        <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, quaerat!</label>
    </div>
</body>
</html>

Answer:

There are some details in your CSS, for example the selector to get the label after the image must not be the > must be the + because you want to get the brother label of the image and not inside the image.

Here you can read about them https://developer.mozilla.org/pt-BR/docs/Web/CSS/Seletores_CSS

Also the margin-botton will not work on the label . My suggestion would be to put positon:relative on the label and then just use the bottom to make the effect what you want.

See how it looks in the example below

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WOOOW</title>
    <style media="screen">
        img{
            width:100px;
            height: 100px;
            transition: width 2s, height 2s;
        }
        img:hover{
            width: 200px;
            height: 200px;
        }
        label{
          position: relative;
            bottom: 0px;
            transition: 2s;
        }
        img:hover + label{
            bottom: 60px;
        }
    </style>
</head>
<body>
    <h1>Titulo</h1>
    <hr>
    <div class="container">
        <h2>Item 1</h2>
        <img src="http://via.placeholder.com/200x200" alt="">
        <label>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, quaerat!</label>
        </img>
    </div>
    <div>
        <h2>Item 2</h2>
        <img src="http://via.placeholder.com/200x200" alt="">
        <label>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, quaerat!</label>
    </div>
    <div>
        <h2>Item 3</h2>
        <img src="http://via.placeholder.com/200x200" alt="">
        <label>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, quaerat!</label>
    </div>
    <div>
        <h2>Item 4</h2>
        <img src="http://via.placeholder.com/200x200" alt="">
        <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, quaerat!</label>
    </div>
</body>
</html>
Scroll to Top
AllEscort