ウェブ学のすすめ

Study of Web Design & Programing

CSSだけでポップアップ画像を表示する方法

CSS

プレビュー

↓別ウィンドウを開いて見る
CSSだけでポップアップ画像を表示する

ポイント

ポップアップする画像は幅、高さ1pxにしておく
ホバーしたときにポップアップする画像の大きさを指定しておく
CSS3のアニメーションを追加してみました。

a:hover {
-webkit-transition-duration: 速度; 
-webkit-transition-timing-function: 変化のタイミング・進行割合;  
}

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSでポップアップ画像を表示</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum01.png" width="160" height="138" alt=""><img src="img/01_over.jpg" width="285" height="220" alt="" class="large"></a>
</div>
<p class="caption">えびカレー</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum03.png" width="160" height="138" alt=""><img src="img/03_over.jpg" width="285" height="220" alt="" class="large"></a>
</div> 
<p class="caption">おから</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum05.png" width="160" height="138" alt=""><img src="img/05_over.jpg" width="285" height="220" alt="" class="large"></a>
</div>
<p class="caption">ベーコンのパスタ</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum07.png" width="160" height="138" alt=""><img src="img/07_over.jpg" width="285" height="220" alt="" class="large"></a>
</div>
<p class="caption">タイ料理</p>
</div>

<div class="block2">
<div class="photo2">
<a href="#" title="" class="popup"><img src="img/thum09.png" width="160" height="138" alt=""><img src="img/09_over.jpg" width="285" height="220" alt="" class="large2"></a>
</div>
<p class="caption">トマトとなすのパスタ</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum02.png" width="160" height="138" alt=""><img src="img/02_over.jpg" width="285" height="220" alt="" class="large"></a>
</div> 
<p class="caption">えびとアボカド</p>
</div>

<div class="block1">
<div class="photo">
<a href="shop/index.html#remontop2" title="" class="popup"><img src="img/thum04.png" width="160" height="138" alt=""><img src="img/04_over.jpg" width="285" height="220" alt="" class="large"></a>
</div>  
<p class="caption">カレーグラタン</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum06.png" width="160" height="138" alt=""><img src="img/06_over.jpg" width="285" height="220" alt="" class="large"></a>
</div>
<p class="caption">マンゴープリン</p>
</div>

<div class="block1">
<div class="photo">
<a href="shop/index.html#kakitop2" title="" class="popup"><img src="img/thum08.png" width="160" height="138" alt=""><img src="img/08_over.jpg" width="285" height="220" alt="" class="large"></a>
</div>
<p class="caption">サラダ</p>
</div>

<div class="block2">
<div class="photo2">
<a href="#" title="" class="popup"><img src="img/thum10.png" width="160" height="138" alt=""><img src="img/10_over.jpg" width="285" height="220" alt="" class="large2"></a>
</div> 
<p class="caption">バターロール</p>
</div> 

</div>
</body>
</html>

CSS

@charset "utf-8";
* {
	margin:0;
	padding:0;
}

body {
	background-color:#333;
	font-family:
	  "ヒラギノ角ゴ Pro W3",
	   "Hiragino Kaku Gothic Pro", 
	   "メイリオ", 
	   Meiryo, 
	   Osaka, 
	   "ＭＳ Ｐゴシック", 
	   "MS PGothic", 
	   sans-serif;
}

#wrapper {
	width: 910px;
	height: 508px;
	margin: 50px auto;
	padding: 30px 0 0 15px;
	
	
}
.block1, .block2 {
	display: inline;
	float: left;
	margin: 0 20px 20px 0;
	height: 197px;
	width: 160px;
}
img {
	border: 5px solid #fff;
	
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	border-radius:5px;
}
.photo, .photo2 {
	position: relative;
	top: 0;
	left: 0;
	width: 160px;
}
.photo a .large {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
	border:none;
}
.photo a.popup, .photo a.popup:visited {
	display: block;
	left: 0;
	top: 0;
	width: 160px;
}
.photo a.popup:hover {
	background-color: #333;
}

.photo a.popup:hover .large {
	display: inline;
	position: absolute;
	left: 0;
	top: -15px;
	height: 220px;
	width: 285px;
	z-index: 100;
	
	/* アニメーション */
	-webkit-transition-duration: 500ms; 
	-webkit-transition-timing-function: linear;  
	/* 回転
	-webkit-animation-name: rotateArea;
	-webkit-animation-delay: 0.5s;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite; 
	*/ 
	
}
.photo2 a img.large2 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
}
.photo2 a.popup:hover .large2 {
	display: block;
	position: absolute;
	left: -125px;
	top: -15px;
	height: 220px;
	width: 285px;
	z-index: 1000;
	
	/* アニメーション */
	-webkit-transition-duration: 500ms; 
	-webkit-transition-timing-function: linear;  
	/* 回転
	-webkit-animation-name: rotateArea;
	-webkit-animation-delay: 0.5s;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite; 
	*/
}

.caption {
	color:#fff;
	text-align:center;
}

/* 
@-webkit-keyframes rotateArea {

0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
*/