왼) 기본상태, 중앙)title에 hover, 오른쪽)사진에만 hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지확대2(day6확장판)</title>
<style>
.container{width: 200px; border: 1px solid black;}
.box{height:100%; margin: 10px;}
.img{overflow: hidden; height: 200px; margin-bottom: 10px;}
.box.title{text-align: center;}
.box.contents{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.container:hover{cursor: pointer;}
.img img{transition: transform 0.3s;}
.img:hover .img{transform:scale(2,2); }
.box.title:hover {text-decoration: underline;}
.container:hover .img img{transform: scale(2,2);}
</style>
</head>
<body>
<div class="container">
<div class="box img">
<img src="../image/greenshoes.jpg" alt="Greensneakers" width="200px" height="200px" class="img">
</div>
<h2 class="box title">Greek Yogurt!</h2>
<p class="box contents">오늘은 2021년 06월 15일입니다.</p>
</div>
</body>
</html>
왼쪽) 기본, 중앙) 사진hover, 전체박스hover 오른쪽)title hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지확대 가로배열형</title>
<style>
*{padding: 0px; margin: 0px; text-decoration: none; color:black;}
.box{padding: 10px; width: 410px; border: 1px solid black;}
.inner-box::after{clear: both; content:''; display: block;}
.img-box{width: 200px; height: 200px; overflow: hidden; float: left;}
.img-box img{width: 200px; height: 200px; transition: transform 0.5s;}
.box:hover img{transform: scale(1.1);}
.group-box{width: 200px; height: 200px; float: right;}
p.title{
height: 25px; line-height: 25px; font-size: 20px; font-weight: bold; text-align: center;
}
p.contents{
height: 175px; line-height: 25px; font-size: 20px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.group-box:hover p.title{text-decoration: underline;}
</style>
</head>
<body>
<div class="box">
<div class="inner-box">
<div class="img-box">
<img src="../image/salmon.jpg" alt="salmon" height="100px" width="150px">
</div>
<div class="group-box">
<p class="title">연어장인의 손맛!</p>
<p class="contents">여기가 어디게 진짜 맛있는 곳인데, 이곳은 바로바로바로바로</p>
</div>
</div>
</div>
</body>
</html>
기능은 위와 같음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지확대 가로배열형</title>
<style>
*{padding: 0px; margin: 0px; text-decoration: none; color:black;}
.container{padding: 10px; border: 1px solid black; width: 874px;}
.post{padding: 10px; width: 410px; border: 1px solid black; float: left;}
.post:nth-child(2){float: right;}
.post::after, .container::after{clear: both; content:''; display: block;}
.left{width: 200px; height: 200px; overflow: hidden; float: left;}
.left img{width: 200px; height: 200px; transition: transform 0.5s;}
.post:hover img{transform: scale(1.1);}
.right{width: 200px; height: 200px; float: right;}
p.title{
height: 25px; line-height: 25px; font-size: 20px; font-weight: bold; text-align: center;
}
p.contents{
height: 175px; line-height: 25px; font-size: 20px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.right:hover p.title{text-decoration: underline;}
</style>
</head>
<body>
<div class="outline">
<div class="container">
<div class="post">
<div class="left">
<img src="../image/salmon.jpg" alt="salmon" width="150px" height="100px" class="img 1">
</div>
<div class="right">
<p class="title">연어장인의 손맛!</p>
<p class="contents">
여기가 어디게 진짜 맛있는 곳인데, 이곳은 바로바로바로바로
</p>
</div>
</div>
<div class="post">
<div class="left">
<img src="../image/umbrella.jpg" alt="yellowumbrella" width="150px" height="100px" class="img 2">
</div>
<div class="right">
<p class="title">노란 우산!</p>
<p class="contents">
비가 추적추적 내리면, 꼭 노란 우산으로 기분을 전환하세요!
</p>
</div>
</div>
</div>
</div>
</body>
</html>