Эффект изображений
| Ховер эффект Код <link href='https://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather' rel='stylesheet' type='text/css'> <h1 style="font-family: 'Raleway', sans-serif;"> Галереи картин<span id="hover"> Живопись.</span></h1> <p style="font-family: sans-serif; color: #ccc; padding-left: 10px;">Картины Геннадия Новицкого <a href="http://novickiy.ru/photo" style="color:#ccc; text-decoration: none;">Галерея</a> Холст, масло.</p> <div id="all"> <div class="view view-first"> <img src="http://novickiy.ru/glavnayaa/1.jpg" /> <div class="mask"> <h2>Пейзаж</h2> <p>Картины на холсте, маслом.</p> <a href="http://novickiy.ru/photo/2" class="info">В галерею</a> </div> </div> <div class="view view-first"> <img src="http://novickiy.ru/glavnayaa/2.jpg" /> <div class="mask"> <h2>Морской пейзаж</h2> <p>Картины на холсте, маслом.</p> <a href="http://www.novickiy.ru/photo/6" class="info">В галерею</a> </div> </div> <div class="view view-first"> <img src="http://novickiy.ru/glavnayaa/6.jpg" /> <div class="mask"> <h2>Голландский пейзаж</h2> <p>Картины на холсте, маслом.</p> <a href="http://www.novickiy.ru/photo/1" class="info">В галерею</a> </div> </div> <div class="view view-first"> <img src="http://novickiy.ru/glavnayaa/8.jpg" /> <div class="mask"> <h2>Натюрморт</h2> <p>Картины на холсте, маслом.</p> <a href="http://www.novickiy.ru/photo/3" class="info">В галерею</a> </div> </div> <div class="view view-first"> <img src="http://novickiy.ru/glavnayaa/3.jpg" /> <div class="mask"> <h2>Парусники</h2> <p>Картины на холсте, маслом.</p> <a href="http://novickiy.ru/photo/parusniki/19" class="info">В галерею</a> </div> </div> <div class="view view-first"> <img src="http://novickiy.ru/glavnayaa/4.jpg" /> <div class="mask"> <h2>Цветы</h2> <p>Картины на холсте, маслом.</p> <a href="http://www.novickiy.ru/photo/4" class="info">В галерею</a> </div> </div> <div class="view view-first"> <img src="http://novickiy.ru/glavnayaa/5.jpg" /> <div class="mask"> <h2>Зимний пейзаж</h2> <p>Картины на холсте, маслом.</p> <a href="http://novickiy.ru/photo/zimnij_pejzazh/20" class="info">В галерею</a> </div> </div> <div class="view view-first"> <img src="http://novickiy.ru/glavnayaa/7.jpg" /> <div class="mask"> <h2>Городской пейзаж</h2> <p>Картины на холсте, маслом.</p> <a href="http://www.novickiy.ru/photo/gorodskoj_pejzazh/17" class="info">В галерею</a> </div> </div> <div class="view view-first"> <img src="http://novickiy.ru/glavnayaa/9.jpg" /> <div class="mask"> <h2>Жанровая живопись</h2> <p>Картины на холсте, маслом.</p> <a href="http://www.novickiy.ru/photo/8" class="info">В галерею</a> </div> </div> <div class="view view-first"> <img src="http://novickiy.ru/glavnayaa/11.jpg" /> <div class="mask"> <h2>Средиземноморский пейзаж</h2> <p>Картины на холсте, маслом.</p> <a href="http://www.novickiy.ru/photo/sredizemnomorskie_pejzazhi/18" class="info">В галерею</a> </div> </div> <div class="view view-first"> <img src="http://novickiy.ru/glavnayaa/10.jpg" /> <div class="mask"> <h2>Санкт Петербург</h2> <p>Картины на холсте, маслом.</p> <a href="http://www.novickiy.ru/photo/10" class="info">В галерею</a> </div> </div> <div class="view view-first"> <img src="http://novickiy.ru/glavnayaa/12.jpg" /> <div class="mask"> <h2>Сюрреализм</h2> <p>Картины на холсте, маслом.</p> <a href="http://www.novickiy.ru/photo/posmotri/5" class="info">В галерею</a> </div> </div> </div> <style type="text/css"> ml { min-height: 100%; } h1 { color: red; padding-left: 10px; } #hover { color: rgba(188, 175, 204, 0.9); } h2#testimonials { color: #fffae3; } div#all { width: 100%; height: 100%; } /* generic css */ .view { margin: 5px; float: left; border: 0px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center } .view .mask, .view .content { width: 275px; height: 210px; position: absolute; overflow: hidden; top: 0; left: 0 } .view img { display: block; position: relative } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; font-family: Raleway, serif; padding: 10px; /*background: rgba(0, 0, 0, 0.8);*/ margin: 20px 0 0 0 } .view p { font-family: Merriweather, serif; font-style: italic; font-size: 14px; position: relative; color: #fff; padding: 0px 20px 0px; text-align: center } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; font-family: Raleway, serif; text-transform: uppercase; box-shadow: 0 0 1px #000 } .view a.info:hover { box-shadow: 0 0 5px #000 } /*1*/ .view-first img { /*1*/ transition: all 0.2s linear; width: 275px; height: 200px; } .view-first .mask { opacity: 0; background-color: rgba(0, 0, 0, 0.5); transition: all 0.4s ease-in-out; } .view-first h2 { transform: translateY(-100px); opacity: 0; font-family: Raleway, serif; transition: all 0.2s ease-in-out; } .view-first p { transform: translateY(100px); opacity: 0; transition: all 0.2s linear; } .view-first a.info { opacity: 0; transition: all 0.2s ease-in-out; } /* */ .view-first:hover img { transform: scale(1.1); } .view-first:hover .mask { opacity: 1; } .view-first:hover h2, .view-first:hover p, .view-first:hover a.info { opacity: 1; transform: translateY(0px); } .view-first:hover p { transition-delay: 0.1s; } .view-first:hover a.info { transition-delay: 0.2s; } </style> |
Галереи картин Живопись.
Картины Геннадия Новицкого Галерея Холст, масло.
0 Комментарии