Css transitions

HTML & CSS
1

I have seen demos showing css transitions and they seem very interesting. Can you apply a transition to a div with one set of content and change the content to something else on hover? How would you write the syntax for that.

2

I think your question is too general, but you can try to look at this code to see how it work

/*SHRINK*/
.shrink img {
  height: 400px;
  width: 400px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.shrink img:hover {
  width: 300px;
  height: 300px;
}
3

If you want to change the text, you can do something like this:

<div class="transition-div">
    <span>Content 1</span>
</div>

.transition-div {
    background:#000;
    color:#fff;
    padding:20px;
    height:200px;
    width:200px;
    /* Transition */
    transition: all 1s linear;
    -webkit-transition: all 1s linear;
}

.transition-div:hover {
    height:300px;
    width:300px;
}

.transition-div:hover span {
    /* Hide the first content to show the next one */
    display:none;
}

.transition-div:hover:before {
    content:"New content";
}
4

If you want real content then you can swap two elements also.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	width:300px;
	margin:auto;
	padding:10px;
	background:red;
	min-height:300px;
}
.wrap p {
	-webkit-transition:1s opacity ease-in;
	-moz-transition:1s opacity ease-in;
	-ms-transition:1s opacity ease-in;
	transition:1s opacity ease-in;
}
.showhover, .wrap:hover p.showfirst {
	position:absolute;
	opacity:0;
	left:-999em
}
.wrap:hover p.showhover {
	position:static;
	opacity:1
}
</style>
</head>

<body>
<div class="wrap">
		<p class="showfirst">This is the normal text that you will see on first looking at the page. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
		<p class="showhover">This is the text that you will see when you hover over the red background . Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
</div>
</body>
</html>
5

Thanks Paul

Thats very helpful