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 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="section__photo"> <div class="section__photo-gallery"> <img class="photo__gallery" src="image/photo__bg-1.jpg" alt="" > <div class="section__content"></div> </div> <div class="section__photo-gallery"> <img class="photo__gallery" src="image/photo__bg-2.jpg" alt="" > <div class="section__content"></div> </div> <div class="section__photo-gallery"> <img class="photo__gallery" src="image/photo__bg-3.jpg" alt="" > <div class="section__content"></div> </div> <div class="section__photo-gallery"> <img class="photo__gallery" src="image/photo__bg-4.jpg" alt="" > <div class="section__content"></div> </div> <div class="section__photo-gallery"> <img class="photo__gallery" src="image/photo__bg-5.jpg" alt="" > <div class="section__content"></div> </div> <div class="section__photo-gallery"> <img class="photo__gallery" src="image/photo__bg-6.jpg" alt="" > <div class="section__content"></div> </div> </div> |
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.section__photo { display: flex; flex-wrap: wrap; padding-bottom: 73px; width: 1280px; flex-direction: column; flex-direction: row; } .section__photo-gallery{ padding-bottom: 20px; padding-right: 20px; position: relative; } .section__photo-gallery:last-child(3n - 1){ margin-right: 0; } .section__content{ background: rgba(0,0,0,0.50); position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; } .section__content:hover{ background: rgba(0,0,0,0.50); opacity: 1; } |