How to move an html label using css transitions

Question

How to move an html label using css transitions

Navigation

#1 by (0 votes)

3

I'd like to move label by 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>

html css

asked by anonymous 06.04.2018 / 21:52

1 answer

Put one site inside another as checkout light box JavaScript Redirect

score 0 · Accepted Answer

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

Here you can read about them link

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

See 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>