<div class="list">
<div class="card">
<img src="http://placehold.jp/3d4070/ffffff/300x150.jpg" alt="">
<div class="body">
<p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
<a href="" class="link">続きを見る</a>
</div>
</div>
<div class="card">
<img src="http://placehold.jp/3d4070/ffffff/300x150.jpg" alt="">
<div class="body">
<p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
<a href="" class="link">続きを見る</a>
</div>
</div>
<div class="card">
<img src="http://placehold.jp/3d4070/ffffff/300x150.jpg" alt="">
<div class="body">
<p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
<a href="" class="link">続きを見る</a>
</div>
</div>
</div>.list{
display: flex;
justify-content: space-between;
width: 70rem;
background: #e7e7e7;
margin: 0 auto;
padding: 3rem;
.card{
width: 20rem;
border: 1px solid #ccc;
background: #fff;
position: relative;
transition: background .3s;
img{
width: 100%;
height: auto;
}
.body{
padding: 1rem;
p{
line-height: 1.6;
margin-bottom: 1rem;
}
a{
&::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
}
&:hover{
background: gold;
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.