マウスオーバー（画像拡大）3

参考URL：https://ehumaga.com/2064

ああああああああああああああああ

【CSS】
/*-------------------------------
マウスオーバー時に拡大（文字なし）
--------------------------------*/
.zoom{
max-width:445px;
max-height:295px;
overflow:hidden;
}
.zoom img{
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s;
}
.zoom img:hover{
transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
/* 画像のマウスオーバー時に明るくする */
opacity:0.7;
transition-duration: 0.7s;
}

ああああああああああああああああ

ああああああああああああああああ

ああああああああああああああああ

※ リンクをzoom1とtextの2ヶ所に貼ること！

【CSS】
/*-------------------------------
マウスオーバー時に拡大（文字入り）
--------------------------------*/
.zoom1{
max-width:445px;
max-height:265px;
overflow:hidden;
position: relative;
}
.zoom1 img{
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s;
}
.zoom1 img:hover{
transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
}

/* 文字の背景レイヤー（コンセプト）*/
.text{
color : white;
margin: 0;
padding: 8px 0 0px 0;
background-color : rgba(34, 34, 34, 0.5);
width :100％;
height : auto;
position: absolute;
right: 0;
bottom: 0;/* 見出しを下 及び真ん中に配置したい場合は 0 */
left: 0;
z-index: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
.text a{
color: white;
}
.text a:hover{
text-decoration: none;
}
.text h4{
text-align: center;
margin: 0;
padding: 0;
font-size:19px;
}
.text p{
text-align: center;
margin:0;
padding: 0;
font-size:16px;
}
/* スマホ対策*/
@media (max-width:500px){
.text{
position: absolute;
bottom: 5px;/* 下のグレー余白を非表示に*/
}
padding: 8px 0 10px 0;
}
.text h4{
font-size:17px;
}
text p{
font-size:14px;
}
}