![]() ![]() ![]() |
動くパーツ「ふわっと浮く3カラム画像」
HTML
下記のHTMLを配置したい場所へコピペしてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="text-range60" style="text-align: center;"> [su_row][su_column size="1/3" center="no" class=""] <div class="img_wrap"><img class="alignnone size-full wp-image-473" src="https://paint-wp.com/wp-content/uploads/2019/10/coupon_gazou.png" alt="" width="218" height="202" /></div> [/su_column] [su_column size="1/3" center="no" class=""] <div class="img_wrap"><img class="alignnone size-full wp-image-473" src="https://paint-wp.com/wp-content/uploads/2019/10/coupon_gazou.png" alt="" width="218" height="202" /></div> [/su_column] [su_column size="1/3" center="no" class=""] <div class="img_wrap"><img class="alignnone size-full wp-image-473" src="https://paint-wp.com/wp-content/uploads/2019/10/coupon_gazou.png" alt="" width="218" height="202" /></div> [/su_column][/su_row] </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.hover05 figure img { margin-left: 30px; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover05 figure:hover img { margin-left: 0; } .img_wrap{ border: 0px solid #ddd; width: 218px; height: 202px; margin: 20px auto 0; transition-duration: 0.5s; } .img_wrap img{ width: 100%; cursor: pointer; } .img_wrap:hover{ box-shadow: 7px 7px 7px rgba(0,0,0,0.5); transform: translateY(-10px); transition-duration: 0.5s; } |
CSSのコピペの場所について
編集している最下部に画像「Custom CSS」があります。
そこに、上記のCSSをそのままコピペしてください。
