Подборка интересных CSS Hover эффектов

admin

9 лет назад

Под понятием “Hover-Effekts” подразумевают эффекты, возникающие в тот момент, когда посетитель сайта наводит курсор мыши на элементы сайта. Примером таких эффектов являются плавные переходы, трансформации, ротации, увеличение и смещение изображений или надписей, а так же всплывающие описания, подсказки, и т.д и т.п. Ещё недавно подобных эффектов можно было добиться только с помощью JavaScript, но с появлением нового стандарта CSS3 всё стало на много проще и интересней. Правда, есть один нюанс, большинство этих эффектов будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3. Ниже собраны наиболее интересные (субъективно) и не сложные (объективно) примеры. Под спойлером найдёте по одному примеру, дальнейшие варианты смотрите в примерах.

1.Пять красивых эффектов оформления описания изображений.

HTML

<div class="item item-type-line">
		<a class="item-hover" href="#">
			<div class="item-info">
				<div class="headline">Hand Lettering Process</div>
				<div class="line"></div>
				<div class="date">February 29, 2014</div>
			</div>
			<div class="mask"></div>
		</a>
		<div class="item-img"><img src="images/1.jpg" alt="" /></div>
	</div>	
	</div>

CSS

.item {
			text-align:center;
			float:left;
			margin:5px;
			position:relative;			
		}
		
			.item,
			.item-hover,
			.item-hover .mask,
			.item-img,
			.item-info {
				width: 300px;
				height: 225px;	
			}

			.item-hover,
			.item-hover .mask,
			.item-img { 
				position:absolute;
				top:0;
				left:0;			
			}			



.item-type-line .item-hover {	
				z-index:100;	
				-webkit-transition: all 300ms ease-out;
				-moz-transition: all 300ms ease-out;
				-o-transition: all 300ms ease-out;
				transition: all 300ms ease-out;	
				opacity:0;
				cursor:pointer;						
				display:block;
				text-decoration:none;
				text-align:center;
			}
			
				.item-type-line .item-info {
					z-index:10;
					color:#ffffff;
					display:table-cell;
					vertical-align:middle;
					position:relative;
					z-index:5;				 					
				}
			
				.item-type-line .item-info .headline {
					font-size:20px;					
				}
				
				.item-type-line .item-info .line {
					 height:1px;
					 width:0%;
					 margin:15px auto;
					 background-color:#ffffff;
					-webkit-transition: all 500ms ease-out;
					-moz-transition: all 500ms ease-out;
					-o-transition: all 500ms ease-out;
					transition: all 500ms ease-out;					 

				}
				
				.item-type-line .item-info .date {
					font-size:12px;
				}
				
				.item-type-line .item-hover .mask {
					background-color:#000;
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
					filter: alpha(opacity=50);										
					opacity:0.5;
					z-index:0;
				}
				
				.item-type-line .item-hover:hover .line {
					width:40%;
				}
				
				.item-type-line .item-hover:hover {
					opacity:1;
				}				
			
			.item-img {			
				background-color:#7a548f;
				z-index:0;			
			}

Пример

2. Описания для изображений, появляющиеся различными способами.

HTML

<div class="image_wrapper">
      <img src="http://placehold.it/200x250" />
      <div class="overlay left">		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>

CSS

.image_wrapper {
  display: inline-block;
  position: relative; /* give position relative so child elements .overlay can be positioned absolutely */
  height: 250px; /* to match the image height */
}

.overlay {
  position: absolute; /* absolute positioning so we can overlay the element on top of .image_wrapper */
  overflow: hidden; /* Hide any text/content within the <div> that might "overflow" */
   background-color: rgba(0,0,0,0.7); /* black color (0,0,0) with a 0.7 opacity */
  color: #fff;
  font-weight: bold;
}

.overlay.left {
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: width 0.3s ease-in-out 
}
.image_wrapper:hover > .overlay.left {
  width: 100%;
}

.image_wrapper:hover > .top_image {
  opacity: 0;
}
.image_wrapper:hover > .bottom_image {
  opacity: 1;
}

Пример

3. Простой эффект наложения описания с одновременным размытием изображения.

HTML

<div class="box">
      <div class="overlay"> 
        <div class="description">
          <a href="">Title of some cool thing</a>
        </div>
      </div>
   <img   src="http://i.imgur.com/p68Lr05.jpg">
</div>

CSS

.box {width: 300px;
height: 300px;
background-color: #fff;
margin: auto;
overflow: hidden;
position: relative;
}

.box img {
  width: 600px;  
}

.overlay {
  background: rgba(255,255,255,0.2);
  position: absolute;
  top:0px; 
  width:270px; 
  height:270px;  
  opacity: 0;
  transition: .5s opacity ease-in-out;
  border: solid 15px rgba(255,255,255,.2);
}

.box:hover .overlay  {opacity: 1;}
.box:hover .description  {opacity: 1;}


.description {
width: 300px;
background-color: rgba(241, 241, 241,0.5);
  opacity: 0;
position: absolute;
top: 60px;
left: -15px;
  text-align: center;
  padding: 10px;
 
    transition: 1s opacity ease-in-out;
}

.description a { color: #fff;
  font-famiLy: 'oswald', sans-serif;
    text-transform: uppercase;
  font-weight: 300;
  font-size: 1.5em;
text-decoration: none;}

Пример

4. Эффект наложения описания с одновременным затемнением изображения.

HTML

<div>
    <p>Great title</p>
    <a href="#">Go to website</a>
    <img src="http://stereosuper.fr/valid/codepen/ordi.png"/>
  </div>

CSS

div{
  height: 190px;
  width: 190px;
  border-radius: 7px;
  background: #000;
  position: relative;
  overflow: hidden;
  text-align:center;
  cursor: pointer;
}

img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: all .6s ease-in-out;
}

div:hover img{
  opacity: 0.4;
  transform: scale(1.2);
  transition: all .3s ease-in-out;
}

p, a{
  position: relative;
  z-index: 1;
  margin: 200px 0 0;
  transition: all .5s ease-in-out;
}

p{
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  color: #fff;
}

a{
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  color: #f04a2f;
  font-size: 18px;
  border-bottom: 1px solid rgba(240, 74, 47, 0.5);
  text-decoration: none;
  position: relative;
}
a:before{
  content: '›';
  display: inline;
  position: absolute;
  left: -10px;
  font-size: 15px;
  top: 2px;
}

div:hover p{
  margin-top: 70px;
  transition: all .3s ease-in-out;
  transition-delay: .1s;
}
div:hover a{
  margin-top: 0;
  transition: all .3s ease-in-out;
  transition-delay: .2s;
}

Пример

5. Эффект стопки изображений

HTML

<div class="container">

  <div id="card_1" class="card">
    <img class="round" src="http://lorempixel.com/75/75/people" />
      <a href="#">
        <div class="overlay round"><i class="ion ion-plus-circled"></i></div>
      </a>
    <div class="header">LOREN IPSUM</div>
    <div class="info">CEO / CFO / OMG</div>
  </div>

  <div id="card_2" class="card">
    <img class="round" src="http://lorempixel.com/75/75/transport" />
      <a href="#">
        <div class="overlay round"><i class="ion ion-plus-circled"></i></div>
      </a>
    <div class="header">SID AMET</div>
    <div class="info">Lead Designer</div>
  </div>

  <div id="card_3" class="card">
    <img class="round" src="http://lorempixel.com/75/75/cats" />
      <a href="#">
        <div class="overlay round"><i class="ion ion-plus-circled"></i></div>
      </a>
    <div class="header">PHIL TEXT</div>
    <div class="info">I.T. Guy</div>
  </div>

  <div class="card">
    <img class="round" src="http://lorempixel.com/75/75/abstract" />
      <a href="#">
        <div class="overlay round"><i class="ion ion-plus-circled"></i></div>
      </a>
    <div class="header">CHECK IT  OUT</div>
    <div class="info">Pure CSS!</div>
  </div>

</div>

CSS

.container {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -60%);
  padding-top: 25px;
  padding-bottom: 220px;
}

.container:hover > .card {
  margin-bottom: -50px;
}

.card {
  position: relative;
  margin: auto;
  margin-bottom: -190px;
  border-radius: 3px;
  width: 345px;
  height: 200px;
  background-color: #FFF;
  border-left: 5px solid #666;
  box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.25);
  -webkit-transform: rotate(7deg);
  transform: rotate(7deg);
  -webkit-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
  z-index: 5;
}

.card:hover {
  -webkit-transform: translateY(-40px) translateX(20px) rotate(-2deg);
  transform: translateY(-40px) translateX(20px) rotate(-2deg);
}

.round {
  display: inline-block;
  margin: 25px;
  border: 2px solid #666;
  border-radius: 50%;
}

.overlay {
  position: absolute;
  display: inline-block;
  margin-left: -104px;
  height: 75px;
  width: 75px;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  -webkit-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
}

.ion {
  position: absolute;
  padding: 0px;
  font-size: 1.5em;
  margin-top: 26px;
  margin-left: 27px;
  color: rgba(255, 255, 255, 0.75);
}

a:hover .overlay {
  opacity: 1;
}

.header {
  display: inline;
  position: absolute;
  margin: 30px auto;
  float: right;
  font-size: 1.5em;
  letter-spacing: 3px;
  color: #666;
}

.info {
  display: inline;
  position: absolute;
  margin: 70px auto;
  float: right;
  letter-spacing: 1px;
  color: #666;
}

#card_1 {
  border-color: #EB2828;
  z-index: 0;
}

#card_1 .round,
#card_1 .header {
  border-color: #EB2828;
  color: #EB2828;
}

#card_2 {
  border-color: #00CB69;
  z-index: 1;
}

#card_2 .round,
#card_2 .header {
  border-color: #00CB69;
  color: #00CB69;
}

#card_3 {
  border-color: #0079BB;
  z-index: 2;
}

#card_3 .round,
#card_3 .header {
  border-color: #0079BB;
  color: #0079BB;
  
@media screen and (min-width: 1080px) {
  .card {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
    -webkit-transition: 0.35s ease-in-out;
    transition: 0.35s ease-in-out;
    }
}

Пример

6. Описание для изображения появляющееся снизу.

HTML

<div class="picture">
   <div class="cat-1">
     <div class="overlay">
       <div class="text">Ginger kitty<p>with love</p></div>
    </div>
    </div>
  </div>

CSS

.cat-1 {
  width: 200px;
  height: 300px;
  margin: 0;
  background-image: url('http://www.hollymashvet.com/images/cat_sitting.jpg');
  position: relative;
}
.cat-2 {
  width: 200px;
  height: 300px;
  margin: 0;
  background-image: url('http://s.hswstatic.com/gif/how-to-solve-cat-behavior-problems-13.jpg');
  position: relative;
}
.cat-3 {
  width: 200px;
  height: 300px;
  margin: 0;
  background-image: url('http://img.thrfun.com/img/022/077/cat_urine_odor_couch_s2.jpg');
  position: relative;
}
.picture:hover .overlay {
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  top: 0%;
  bottom: 0;
  right: 0;
  left: 0;
  transition: all 0.3s ease;
  opacity: 1;
}
.picture .overlay {
 background-color: rgba(0,0,0,0.5);
  position: absolute;
  top: 80%;
  bottom: 0;
  right: 0;
  left: 0;
  transition: all 0.3s ease;
}
.overlay .text {
  color: white;
  font-size: 20px;
  font-family: 'Helvetica Neue';
  font-weight: 100;
  text-align: center;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
}
.picture:hover p {
  display: block; 
  color: pink;
}
.picture p {
  display: none;
}
.picture {
  padding: 0px;
}

Пример

7. Ещё одна стопка изображений

HTML

<div class="photoDeck">
	<img src="http://pbdesigns.us/presi/images/vette1.jpg" alt="pic" class="one photo transition" />
	<img src="http://pbdesigns.us/presi/images/vette2.jpg" alt="pic" class="two photo transition negRotated" />
	<img src="http://pbdesigns.us/presi/images/vette3.jpg" alt="pic" class="three photo transition rotated" />
</div>

CSS

.photoDeck	{position:relative; height:130px; width:160px;}
.photo {padding:10px; z-index:100; background-color:#fff; width:100px; position:absolute; top:0; left:0; box-shadow: 0 0 4px 0 #333; border:1px solid #333;}

.transition	{-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;    
  transition: all 0.5s ease-in-out;}

.photoDeck:hover .one	{top:0; left:0; width:200px;}
.photoDeck:hover .two	{top:0; left:210px; width:200px;}
.photoDeck:hover .three	{top:160px; left:40px; width:200px;}

.rotated	{-webkit-transform: rotate(1.5deg);  /* Saf3.1+, Chrome */
			     -moz-transform: rotate(1.5deg);  /* FF3.5+*/
			      -ms-transform: rotate(1.5deg);  /* IE9 */
			       -o-transform: rotate(1.5deg);  /* Opera 10.5 */
			          transform: rotate(1.5deg);}

.negRotated	{ -webkit-transform: rotate(-2.5deg); 
						     -moz-transform: rotate(-2.5deg); 
						      -ms-transform: rotate(-2.5deg); 
						       -o-transform: rotate(-2.5deg); 
						          transform: rotate(-2.5deg);
						               zoom: 1;}

Пример

8. Описание изображения, появляющееся слева.

HTML

<div class="show-profile">
    <img src="http://www.devzart.com/images/our-services/web-hosting.jpg" alt="web-hosting-company">
    <div class="show-profile-txt">
      <h3><a href="http://www.devzart.com/" target="blank">Devzart</a></h3>
      <h4>Web designing and development</h4>
      <p>Devzart is one of the major website hosting company located in India. </p>
    </div>
   </div>

CSS

.show-profile {
	width: 600px;
	height: 300px;
	overflow: hidden;
	position: relative;
  background: #fff;
  padding-bottom:10px;
}

.show-profile img {
	position: absolute;
	top: 0;
	left: 0;
	height: inherit;
	width: auto;
	float: left;
	transition: all 0.8s;
	-moz-transition: all 0.8s;
}

.show-profile:hover img {
	opacity: 0.2 !important;
}

.show-profile .show-profile-txt h3 {
	padding: 0px;
	margin: 0px;
	font-size: 35px;
  font-weight:700;
	font-family: "Open Sans";
}

.show-profile .show-profile-txt h3 > a {
  color: #fff !important;
  font-size: 35px;
  font-weight:700;
	font-family: "Open Sans";
  text-shadow: 2px 3px 1px #444;
}

.show-profile .show-profile-txt h4 {
	padding: 0px 20px;
	padding-bottom: 13px;
	margin: 0px;
	font-size: 14px;
  letter-spacing: 3px;
	width: 98%;
	font-family: "Open Sans";
  text-transform:uppercase;
	border-bottom: 2px solid #000;
}

.show-profile .show-profile-txt p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 20px;
	font-family: "Open Sans";
}


.show-profile .show-profile-txt{
	width: 92%;
	height: 94%;
	position: absolute;
	top: 0%;
	left: 50%;
	padding: 3% 4%;
	background: #D90E0E;
	color: rgba(255,255,255,1);
/*	display: none;*/
	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.4s;
}

.show-profile:hover .show-profile-txt {
	display: block !important;
	color: rgba(255,255,255,1);
	background:rgba(217,14,14,0.85);
	left: 0px;
	top: 0px;
}


.show-profile .show-profile-txt {
	width: 100%;
	position: absolute;
	left: 100%;
}

.show-profile .show-profile-txt p {
	padding:60px 0px 0px 20px;
	font-size: 24px;
	font-family: "Open Sans";
  font-weight:700;
	color: #fff;
  line-height: 35px;
}

.show-profile .show-profile-txt p span {
	font-family: "Open Sans" !important;
}

.show-profile .show-profile-txt a {
	padding: 0px 0px 0px 20px;
	color:#FF5A22 !important;
	font-family: "Open Sans" !important;
	text-decoration: none !important; 
}

.show-profile .show-profile-txt {
	float: left;
}

Пример

9. Описание для изображения с затуханием.

HTML

<div class="primary">
  <img src="http://itknowledgeexchange.techtarget.com/uncharted-waters/files/2013/11/travis_klein2.jpg" alt=""/>
  <div class="secondary">
    <p>Sample</br>Text</p>
  </div>
</div>

CSS

.primary {
  display:inline-block;
  margin:0 1em 1em;
  border:1em solid #4c4c19;
  border-radius:.5em;
}
img {
  height:100%;
  max-width:100%;
}
/* =================================
     Vertically center <p> element
   ================================= */
p {
  margin:0;
  font-size:32px;
  text-align:center;
  position:absolute;
  top:25%;
  left:25%;

}
/* =================================
        Demo-Specific Styles
   ================================= */
.primary {
  position:relative;
  width:200px;
  height:200px;
  cursor:pointer;
}
.secondary {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  opacity:0.0;
  background:white;
  transition: .4s ease-out;
}
.primary:hover .secondary {
  opacity: .6;
}

Пример

10. Описания для изображения появляющиеся с различных сторон.

HTML

<div class="img-box bottom-me">  
  <img src="http://placehold.it/200x182"/>  
  <span class="caption">Bottom Caption</span>  
</div>

CSS

.img-box {
  height: 182px;
  width: 200px;
  margin:10px;
}
.img-box {
	cursor: pointer;
	float: left;
	position: relative;
	overflow: hidden;
}
.img-box img {
	position: absolute;
	left: 0;
		-webkit-transition: all .2s ease-out;
		-moz-transition: all .2s ease-out;
		-o-transition: all .2s ease-out;
		-ms-transition: all .2s ease-out;	
	transition: all .2s ease-out;
}

/* Caption Common Style */
.img-box .caption {
	background-color: rgba(0,0,0,0.8);
	position: absolute;
	color: #fff;
  padding:5px;
	z-index: 100;
		-webkit-transition: all .2s ease-out;
		-moz-transition: all .2s ease-out;
		-o-transition: all .2s ease-out;
		-ms-transition: all .2s ease-out;	
		transition: all .2s ease-out;
	left: 0;
}
/** Bottom Caption **/
.img-box.bottom-me .caption {
	height: 30px;
	width: 200px;
	display: block;
	bottom: -40px;
	line-height: 25pt;
}
.img-box.bottom-me:hover .caption {
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
	opacity: 1;
	transform: translateY(-100%);
}

Пример

11. Простое описание с ссылкой.

HTML

<div id="main">
<div class="inner">
<img src="http://vignette3.wikia.nocookie.net/despicableme/images/f/fa/Rs_634x1024-130605092844-634.DespMe2.mh.060513.jpg/revision/latest?cb=20130807011919" />
<div class="cont">
<p class="full"><a href="#">Original Image</a></p>
<p class="dsc">Description about the image goes here.</p>
</div>
</div>
</div>

CSS

/*		Author  : Naveen Niraula	*/
/*		Created : 2015 - Mar - 1	*/

* {
	margin: 0px;
	padding: 0px;
}
#main {
  margin: 35px 40%;
}
a {text-decoration: none;color: #000;}
.inner {
	position: relative;
	top: 0px;
	height: 300px;
	width: 200px;
	display: inline-block;
	border: 1px solid #008080;
}
.inner img {
	min-width: 100%;
	max-height: 100%;
}
.inner .cont {
	position: absolute;
	bottom: 0px;
	min-width: 100%;
	text-align: center;
	display: none;
}
.inner:hover .cont {
	display: block;
	height: auto;
	background: #008000;
}
.inner .cont p:first-child {
	margin-bottom: 5px;
	margin-top: 5px;
}
.inner .cont p:first-child a {
	border-radius: 3px;
	background: #fff;
	display: inline-block;
	padding: 10px 5px;
	font-size: 16px;
	width: 70%;
	opacity: 0.7;
	font-variant: small-caps;
	border: 1px solid #000;
}
.inner .cont p:first-child a:hover {
	background: #000;
	color: #fff;
	opacity: 1;
	transition: opacity 1s,color 0.8s;
}

.inner .cont p:last-child {
	background: #008080;
	color: #fff;
	display: inline-block;
	width: 80%;
	border-radius: 3px;
	padding: 8px 5px;
	margin-bottom: 5px;
	}

Пример

12. Простое описание появляющееся снизу.

HTML

<div class="box">
  <a href="#">
    <img src="http://placehold.it/500x300" alt="" />
    <div class="summary">
      <h4>Title Here</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum pretium odio non malesuada. Donec feugiat sodales tempor. Fusce maximus imperdiet tempus. Aliquam id mollis velit, in vehicula massa. Proin ornare, justo ac dapibus accumsan, nulla massa pharetra urna, at euismod urna sem a lectus. Sed gravida facilisis ante, eu venenatis nulla placerat vel. Nulla commodo vehicula pharetra.</p>
    </div>
  </a>
</div>

CSS

.box { 
  overflow: hidden;
  position: absolute;
}
.box img {
  display: block;
}
.box a {
  color: white;
}
.box a:hover p {
  max-height: 500px;
}

.summary {
  position: absolute;
  padding: 0.5em;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
}
.summary h4 {
  margin: 0;
}
.summary p {
  overflow: hidden;
  margin: 0.5em 0 0 0;
  max-height: 0;
  transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

Пример

13. Описание с одновременным плавным затуханием изображения.

HTML

<a href="#" class="monkey-hover-effect">
    <div class="item--container">
      <img src="http://i.imgur.com/K65oF.jpg" />
      <div class="item--plus--icon"></div>
      <div class="item--block"></div>
      <div class="item--block--text">Hover effect demo!!!</div>
    </div>    
  </a>

CSS

a.monkey-hover-effect{
  display:inline-block;
  overflow:hidden;
}

a.monkey-hover-effect:hover div.item--plus--icon{
  opacity:0.0;
}

a.monkey-hover-effect:hover div.item--block{
  opacity:0.5;
  width:96%;
  height:96%;
  top:2%;
  left:2%;
}

a.monkey-hover-effect:hover div.item--block--text{
  opacity:1.0;
}

div.item--container{
  display:inline-block;
  position: relative;
}

div.item--container img{
  width:360px;
  height:auto;
}

div.item--plus--icon {
  border: 0;
  height:60px;
  width:60px;
  max-width: 60px;
  max-height: 60px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbdJREFUeNrk171KA0EQAODdPY0QSeNBQAhYGd/AJggWNtoIvomtlW9gr0+gjS/gEwiiVmJquWChzQXBn9zFw8rcXnJ7+zczO3Bw7LDFxwyzDN+//GYBxZEICfv7nYiQsMWPCAkbAvgfljq4hKUMlmKpgiuxFMFzsdTAC7GUwLWwVMC1sRTASljsYGUsZnAjLFZwYyxGsBYWG1gbiwlsBIsFbAyLAWwUCx1sHAsZbAULFWwNCxFsFQsNbB0LCewECwXsDAsB7BTrG+wc6xPsBesL7A3rA+wV6xrsHesSDAJbxBIG7OGmiLurrDV7/viaj29HeQoJbKSyuxs83lrjnXImS1TBIoQ2dgEGibUFBou1AQaNNQ0GjzU5pbWx2+uyKfwX7WUWyc67bb5SdS/9YpOnt/zDBthIZU93or7qnUGPx4NeFMtyz+95enwzGZpuaRRtbAqMDqsDRoltCkaLbQJGjVWd0laxB1c/d1W5s72oL1serodZcvGQjWxUGH1lVcBksHXApLCLwOSw88AksVVgsljZswQSe36fvXRa5Y0pGbNPHTDYysrWPN2WJt3Gs+BgsEVMBRgAnLpkxqW/lMsAAAAASUVORK5CYII=');
  position: absolute;
  right:0;
  bottom:0;
  margin-bottom:4px;
  opacity:1.0;
  
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
div.item--block{
  width:100%;
  height:100%;
  background:#000;
  opacity:0.0;
  position: absolute;
  top:0;
  left:0;
  
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

div.item--block--text{
  color:#fff;
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  text-align:center;
  padding-top:50%;
  font-size:30px;
  opacity:0.0;
  
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

Пример

14. Интересный эффект с картинкой.

HTML

<div class="carre_couleur base_hov" style="background-color:#f8b334;">
      <div class="retract" style="background-color:#f8b334;"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/173024/maison.png"></div>
      <div class="acced">
        <div class="big_acced">BEST HOME</div>
        <div class="middle_acced">This home is the best</div>
      </div>
    </div>

CSS

.carre_couleur
{
  width:200px;
  height: 200px;
  display: inline-block;
  position: relative;
  margin-top: 0px;
}
.base_hov .retract
{
  -webkit-transition: all 200ms ease-in;
  -webkit-transform-origin: 50% 20%; 
  -webkit-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform-origin: 50% 20%;
  -moz-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform-origin: 50% 20%;
  -ms-transform: scale(1);
  transition: all 200ms ease-in;
  transform-origin: 50% 20%;
  transform: scale(1);
  width:200px;
  height: 200px;
  position: absolute;
  z-index: 2;
  left:0;
}
.base_hov:hover .retract
{
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(0.6);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(0.6);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(0.6);
  transition: all 200ms ease-in;
  transform: scale(0.6);
}
.acced
{
  width: 180px;
  padding:10px;
  bottom:0; 
  position:absolute;
  z-index: 1; 
  text-align: left;
}
.big_acced
{
  color:#D70000;
  font-size:25px;
  font-weight: 400;
  font-family:'Roboto';
}
.middle_acced
{
  color:#ffffff;
  font-size:15px;
  font-weight: 400;
  font-family:'Roboto';
}

Пример

15. CSS3 hover effects

HTML

<div class="view view-tenth">  
     <img src="http://i.imgur.com/j07SfQZ.png" />  
     <div class="mask">  
     <h2>The Only Living Boy in New York</h2>  
     <p>Words and such, a whole lot more of muh flippin' words.</p>  
         <a href="#" class="info">Read More</a>  
     </div>  
</div>

CSS

div#all {
  width: 100%;
  height: 100%;
}

/* generic css */
.view {
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    font-family: Raleway, serif;
    padding: 10px;
    /*background: rgba(0, 0, 0, 0.8);*/
    margin: 20px 0 0 0
}
.view p {
    font-family: Merriweather, serif;
    font-style: italic;
    font-size: 14px;
    position: relative;
    color: #fff;
    padding: 0px 20px 0px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    font-family: Raleway, serif;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

/*10*/
.view-tenth img { 
    transform: scaleY(1);
    transition: all .7s ease-in-out;
}
.view-tenth .mask { 
    background-color: rgba(255, 231, 179, 0.3); 
    transition: all 0.5s linear;
    opacity: 0;
}   
.view-tenth h2{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
    padding-
}
.view-tenth a.info { 
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}


.view-tenth:hover img { 
  -webkit-transform: scale(10);  
  transform: scale(10);
    opacity: 0;
}

.view-tenth:hover .mask { 
    opacity: 1;
}                                                                            
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{ 
    transform: scale(1);
    opacity: 1;
}

Пример

Подборка будет постоянно обновляться.