【HTML5, CSS3】 jQueryやJavaScriptを使わないCSS3だけで作るロールオーバー
HTML5とCSS3だけで作るロールオーバーを紹介します。
このロールオーバーは一切jQueryやJavaScriptを使っていません。
まず始めに、画像の素材がないときに、画像の仮置きのスペースを確保する方法を紹介します。
やり方はいたって簡単。
img src="" の部分を、img src="http://placehold.it/150x200" に入れ替えるだけです。
150x200 は width x height になりますので必要なサイズに変えてください。
そうすると以下のように表示されます。
中段の一番右のものは、ホバーしたときです。これはCSS3を使ったロールオーバーです。
それでは作ってみましょう。
【index.html】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ロールオーバー</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT' rel='stylesheet' type='text/css'> <!--[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]--> </head> <body> <div id="container" class="clearfix"> <h1>SELECT SHOP</h1> <div id="gallery"> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>circle on the lace</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>border and a little lace</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>a long best</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>a long cardigan</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>for the party!</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>dolman sleeves</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>white coat with neck fur</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>black fur coat</p> </div> </a> </article> <article> <a href="#"> <img src="img/img09.jpg" width="150" height="200" alt=""> <div class="detail"> <p>one piece with dolman sleeves</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>denim jacket with neck fur</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>short sleeves</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>black laced</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>frilled cut and sewn</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>black with white lace</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>formal one piece</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>black one piece</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>formal blouse with a tie</p> </div> </a> </article> <article> <a href="#"> <img src="http://placehold.it/150x200" alt=""> <div class="detail"> <p>naturaly with a belt</p></div> </a> </article> </div><!-- /#gallery --> </div><!-- /#container --> </body> </html>
【reset.css】
@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
}
:focus {
outline: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol {
margin-left: 2em;
}
/* clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
【style.css】
@charset "UTF-8";
html,body {
height: 100%;
}
body {
border-left: 20px solid #000;
border-right: 20px solid #000;
}
a {
color:#FFF;
text-decoration: none;
}
#container {
width: 910px;
margin: 0 auto;
}
h1 {
font-size: 18px;
margin-bottom: 2px;
padding-top: 2px;
}
#gallery article {
float: left;
width: 150px;
display: block;
margin: 0 2px 2px 0;
}
/*floatの左から6個目の要素の指定*/
#gallery article:nth-child(6n) {
margin-right: 0;
}
#gallery article a {
display: block;
position: relative;
width: 150px;
height: 200px;
-webkit-transition: -webkit-transform 0.4s ease;
-moz-transition: -moz-transform 0.4s ease;
-o-transition: -o-transform 0.4s ease;
transition: transform 0.4s ease;
}
#gallery article a:hover {
-webkit-transform: scale(1.05,1.05);
-moz-transform: scale(1.05,1.05);
-ms-transform: scale(1.05,1.05);
-o-transform: scale(1.05,1.05);
transform: scale(1.05,1.05);
z-index: 100;
}
#gallery article a div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 200px;
background-color: rgba(50,50,50,0.6);
opacity: 0;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
}
#gallery article a div p {
padding: 80px 10px 0;
text-align: center;
font-family:
'OFL Sorts Mill Goudy TT',
arial,
serif;
}
#gallery article a:hover div {
opacity:1;
}
