CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Code
Code

Reputation: 2129

Display <p> on hover of div

I have a div that has a p contained in it. I would like the hide the p until the div is hovered on. When the div is hovered I would like to change the height of the div and display the p at the bottom of the div.

Below is what I have, currently it is not responding at all...

CSS

.tile {
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        background: #fff;
        padding: 20px;
        margin-bottom: 30px;
        height: 135px;
        -webkit-transition: height ease 1s;
        -moz-transition: height ease 1s;
        -o-transition: height ease 1s;
        transition: height ease 1s;
    }

   .hideText {
        visibility: hidden;
    }

        .tile:hover {
            height: 260px !important;               
        }

        .hideText:hover {
            -webkit-transition: height ease 1s;
            -moz-transition: height ease 1s;
            -o-transition: height ease 1s;
            transition: height ease 1s;
            visibility: visible;
        }

Markup

<div class="col-sm-3">
        <div class="tile blue">
            <a href="#" style="color: white; text-decoration: none;">
                <h3 class="title" style="font-size: 30px !important;"><span class="glyphicon glyphicon-pencil" style="padding-right: 10px;"></span>Is something broken?</h3>
                <hr />
                <p style="font-size: 19px !important;"><span class="glyphicon glyphicon-info-sign" style="padding-right: 10px;"></span>Hover to view details</p>
                <p class="hideText">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
            </a>
        </div>
    </div>

Upvotes: 0

Views: 66

Answers (2)

Mattew
Mattew

Reputation: 1

If you want change the height, don't use height but use line-height. The height property edit the height, the line-height align vertically the content. The correct code should be:

.tile {
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        background: #000;
        padding: 20px;
        margin-bottom: 30px;
        line-height: 70%;
        min-width: 100%;
        -webkit-transition: height ease 1s;
        -moz-transition: height ease 1s;
        -o-transition: height ease 1s;
        transition: height ease 1s;
    }

   .hideText {
        visibility: hidden;
    }

        .tile:hover {
            height: 260px !important;               
        }

        .hideText:hover {
            -webkit-transition: height ease 1s;
            -moz-transition: height ease 1s;
            -o-transition: height ease 1s;
            transition: height ease 1s;
            visibility: visible;
        }
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="col-sm-3">
        <div class="tile blue">
            <a href="#" style="color: white; text-decoration: none;">
                <h3 class="title" style="font-size: 30px !important;"><span class="glyphicon glyphicon-pencil" style="padding-right: 10px;"></span>Is something broken?</h3>
                <hr />
                <p style="font-size: 19px !important;"><span class="glyphicon glyphicon-info-sign" style="padding-right: 10px;"></span>Hover to view details</p>
                <p class="hideText">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
            </a>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Riot Zeast Captain
Riot Zeast Captain

Reputation: 968





   .tile {
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        background: #fff;
        padding: 20px;
        margin-bottom: 30px;
        height: 135px;
       -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    }

    .hideText {
        height: 0;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		overflow: hidden;

    }

        .title:hover  .hideText{
            height: 260px !important;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			transition: all 0.3s ease;
			display: block;
        }


    <div class="col-sm-3">
			<div class="tile blue">
				<a href="#" style="color: black; text-decoration: none;">
				<div class="title" >
					<h3 style="font-size: 30px !important;"><span class="glyphicon glyphicon-pencil" style="padding-right: 10px;"></span>Is something broken?</h3>
					<hr />
					<p style="font-size: 19px !important;"><span class="glyphicon glyphicon-info-sign" style="padding-right: 10px;"></span>Hover to view details</p>
					<p class="hideText">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
					</div>
				</a>
			</div>
		</div>
	</div>







change the css tag visible to display, as I shown in the code.

Upvotes: 1

Related Questions