jQuery memo_03 hover

index.html

-----

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ホバーで表示</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>

<body>
<div class="col-4 gallery-item">
<div class="gallery-cover">
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</div>
<div class="gallery-image"><img src="images/html5-02.png"></div>
<div class="gallery-title">HTML</div>
</div>

<script>
$(function(){
$('.gallery-item').hover(
function(){
$(this).find('.gallery-cover').fadeIn();
},
function(){
$(this).find('.gallery-cover').fadeOut();
}
);
});
</script>
</body>
</html>

 

-------

CSS

 

.col-4{
width: 260px;
}

.gallery-item{
position: relative;
height: 350px;
padding: 40px;
text-align: center;
margin: 15px;
background-color: #39d1b4;
color: white;
}

.gallery-title{
font-size: 30px;
}

.gallery-image{
margin-bottom: 50px;
}

.gallery-cover{
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.75);
padding: 50px 20px;
font-size: 1.2em;
}