demun(대문블로그) :: CSS3 - Animations 애니메이션 캡션

CSS3 - Animations 애니메이션 캡션

demun
퍼블리셔/css
2012. 8. 3. 06:00

이미지에 마우스를 올리면 캡션이 나타나는 애니메이션을 알아보겠습니다.
이런 기능은 예전에는 자바스크립트로만 가능했지만 이제 CSS3로도 그 기능을 할 수 있습니다.
어떤 기능인지 결과를 동영상으로 확인하겠습니다.

여기서는 -webkit 을 사용했습니다.
크로스 브라우징 코드를 만들어주는 사이트를 참고하세요.
http://demun.tistory.com/2172

마크업은 아래와 같습니다.

><!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Animations - demun</title>
	<style>
		body {
			width: 500px;
			margin: 50px auto;
			font-family: sans-serif;
		}
		img {
			width: 100%;
		}
		figure {
			margin: 0;
			position: relative;
			border: 5px solid white;
			box-shadow: 0 0 4px rgba(0,0,0,.3);
			display: block;
			cursor: pointer;
			overflow: hidden;
		}
		figure:hover figcaption {
			opacity:1;
			-webkit-transform: rotate(0deg);
			 top:0; 
		}
		figcaption {
			opacity: 0;
			position: absolute;
			top:-100%; 
			/* top: 0;*/
			color: white;
			background: rgba(0,0,0,.4);
			height: 100%;
			width: 100%;
			-webkit-transition: all .4s ease-in;
			-webkit-transition-delay: .5s; 
			
		 /* -webkit-transform: rotate(360deg);*/
		}
		figure img {
			-webkit-transition: all 1.5s;
		}
		figure:hover img {
			-webkit-transform: scale(1.1);
		}
		figcaption h3,
		figcaption p {
			padding: 10px 20px;
			margin-bottom: 0;
			margin-top: 0;
			position: relative;
			left: 100%;
			-webkit-transition: all .4s;
		}

		figure:hover h3,
		figure:hover p {
			left: 0;
		}

		figcaption h3 {
			background: black;
			margin-top: 20px;
		}

		figcaption p {
			-webkit-transition-delay: 1.2s;
		}
		figcaption h3 {
			-webkit-transition-delay: 1s;
		}

		figcaption a {
			color: white;
		}	
	</style>
</head>
<body>
<figure>
	<img src="https://t1.daumcdn.net/cfile/tistory/16628F435013AEBA19" alt="image"/>
	<figcaption>
	<h3>글 제목</h3>
	<p>
		첫번째 단락으로 이미지에 대한 설명글이 있으며, 여기는 첫번째 p 단락입니다.
		제시카알바의 사진으로 눈의 피로도 없애보세요. 
	</p>
	<p>
		두번째 단락으로 위와 같은 이미지에 대한 설명글이 있는 곳으로, 여기는 두번째 p 단락입니다.
	</p>
	</figcaption>
</figure>
</body>
</html>

직접 코딩하면서 어떻게 변하는지를 볼 수 있게 동영상으로 담았습니다.
저도 버벅대서 챙피하군요. 하지만 모든걸 오픈 합니다.
transition 이나 transform 도 position과 깊은 관련이 있습니다. 어떻게 하느냐에 따라 다른 결과가 나오더군요.
동영상에는 코딩을 하나 하나 하면서 변화하는 모습을 담았습니다. 그래서 어디까지 어떻게 변하는지를 볼 수가 있습니다.

여러분들도 이 코딩을 수정하면서 마우스를 갖다 대어보세요.
여기에서 볼 수 있습니다.

개 개

CSS3 - Animations 애니메이션 캡션

티스토리툴바