How to move an html label using css transitions

Asked

Viewed 213 times

3

I’d like to move the label by hovering the mouse 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 css-transitions

  • Take a look https://answall.com/questions/239722/howfunction-cada-valor-que-pode-ser-usado-no-attribute transition-transition/240057#240057. Speak if you have questions

  • With CSS3 or Javascript (jQuery)??

  • Only with CSS3

1 answer

0


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

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

In addition to the margin-botton will not work in label. My suggestion would be to put positon:relative on the label and then use only the bottom to do the effect you want.

See how it looked 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>

Browser other questions tagged html css css-transitions

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