Мне приходилось создавать и оформлять множество фотогалерей на различных сайтах, и в 90% случаях все фотографии там не имели каких-либо подписей. Поэтому на всех примерах в данной заметке не будет оформления названия и описания фотографии, а только значок ее увеличения и соотв. самого изображения.
Если есть необходимость подписать фотографию, то можно просто добавить текст ниже нее.
Вариант 1
Пример имеет 2 варианта иконки увеличения изображения - это шрифт FontAwesome и графическая zoom.png.
|
1 2 3 4 5 6 |
<div class="hover-image-1"> <img src="image.jpg" alt="" /> <a href="image-large.jpg"> <i class="fa fa-search"></i> </a> </div> |
|
1 2 3 4 5 6 |
<div class="hover-image-1"> <img src="image.jpg" alt="" /> <a href="image-large.jpg"> <img src="zoom.png" alt="" /> </a> </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 |
.hover-image-1 * { box-sizing: border-box; } .hover-image-1 { position: relative; overflow: hidden; display: inline-block; background: #000; line-height: 0; } .hover-image-1 img { transition: all 0.5s ease 0s; } .hover-image-1:hover > img { transform: scale(1.6, 1.6) rotate(-20deg); opacity: 0.5; } .hover-image-1 a { display: block; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; border-radius: 50%; text-align: center; transition: all 0.5s ease 0s; border: 4px solid #bfe2ff; background: #337ab7; opacity: 0.8; transform: scale(0); padding: 20px; } .hover-image-1 a img { width: 48px; } .hover-image-1 a i { font-size: 48px; color: #fff; } .hover-image-1 a:hover { opacity: 1; } .hover-image-1:hover a { transform: scale(1); } |
Вариант 2
Вариант аналогичен первому, со шрифтом FontAwesome и графической иконкой zoom.png.
|
1 2 3 4 5 6 |
<div class="hover-image-2"> <img src="image.jpg" alt="" /> <a href="image-large.jpg"> <i class="fa fa-search"></i> </a> </div> |
|
1 2 3 4 5 6 |
<div class="hover-image-2"> <img src="image.jpg" alt="" /> <a href="image-large.jpg"> <img src="zoom.png" alt="" /> </a> </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 |
.hover-image-2 * { box-sizing: border-box; } .hover-image-2 { overflow: hidden; display: inline-block; position: relative; line-height: 0; } .hover-image-2 img { transition: all 0.3s ease-in-out; } .hover-image-2 a { display: block; position: absolute; top: 50%; left: 20px; margin-top: -50px; width: 100px; height: 100px; text-align: center; padding: 20px; transition: all 0.3s ease-in-out; background: #bfe2ff; transform: translateX(-120px); } .hover-image-2 a::after { content: ""; background: #337ab7; position: absolute; transition: all 0.3s ease-in-out; z-index: -1; height: 100px; right: 0; top: 0; width: 0; } .hover-image-2 a:hover::after { width: 100%; } .hover-image-2 a i { font-size: 54px; color: #fff; } .hover-image-2:hover > img { transform: translateX(120px); } .hover-image-2:hover a { transform: translateX(0); } |
Вариант 3
Идею позаимствовал у Мегафона. В этих вариантах не требуется графики или шрифтов, иконка располагается в CSS (base64).
Иконка: A
Иконка: B
|
1 2 3 4 5 6 7 |
<div class="hover-image-3"> <a href="image-large.jpg"> <img src="image.jpg" alt="" /> <span></span> <div class="hover-image-circle"></div> </a> </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 |
.hover-image-3 * { box-sizing: border-box; } .hover-image-3 { overflow: hidden; display: inline-block; position: relative; line-height: 0; } .hover-image-3 a span { display: block; position: absolute; width: 50px; height: 50px; right: 20px; bottom: 10px; filter: drop-shadow(0 0 6px black); z-index: 2; background: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMjU2LDk2QzE0NC4zNDEsOTYsNDcuNTU5LDE2MS4wMjEsMCwyNTZjNDcuNTU5LDk0Ljk3OSwxNDQuMzQxLDE2MCwyNTYsMTYwYzExMS42NTYsMCwyMDguNDM5LTY1LjAyMSwyNTYtMTYwICAgQzQ2NC40NDEsMTYxLjAyMSwzNjcuNjU2LDk2LDI1Niw5NnogTTM4Mi4yMjUsMTgwLjg1MmMzMC4wODIsMTkuMTg3LDU1LjU3Miw0NC44ODcsNzQuNzE5LDc1LjE0OCAgIGMtMTkuMTQ2LDMwLjI2MS00NC42MzksNTUuOTYxLTc0LjcxOSw3NS4xNDhDMzQ0LjQyOCwzNTUuMjU3LDMwMC43NzksMzY4LDI1NiwzNjhjLTQ0Ljc4LDAtODguNDI4LTEyLjc0My0xMjYuMjI1LTM2Ljg1MiAgIGMtMzAuMDgtMTkuMTg4LTU1LjU3LTQ0Ljg4OC03NC43MTctNzUuMTQ4YzE5LjE0Ni0zMC4yNjIsNDQuNjM3LTU1Ljk2Miw3NC43MTctNzUuMTQ4YzEuOTU5LTEuMjUsMy45MzgtMi40NjEsNS45MjktMy42NSAgIEMxMzAuNzI1LDE5MC44NjYsMTI4LDIwNS42MTMsMTI4LDIyMWMwLDcwLjY5MSw1Ny4zMDgsMTI4LDEyOCwxMjhjNzAuNjkxLDAsMTI4LTU3LjMwOSwxMjgtMTI4ICAgYzAtMTUuMzg3LTIuNzI1LTMwLjEzNC03LjcwMy00My43OTlDMzc4LjI4NSwxNzguMzksMzgwLjI2NiwxNzkuNjAyLDM4Mi4yMjUsMTgwLjg1MnogTTI1NiwyMDVjMCwyNi41MS0yMS40OSw0OC00OCw0OCAgIHMtNDgtMjEuNDktNDgtNDhzMjEuNDktNDgsNDgtNDhTMjU2LDE3OC40OSwyNTYsMjA1eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo="); background-repeat: no-repeat; background-size: cover; } .hover-image-3 .hover-image-circle { position: absolute; border-radius: 50%; background: #bfe2ff; right: -25px; bottom: -35px; width: 140px; height: 140px; transform: scale(0); transition: all 0.3s linear; } .hover-image-3 a:hover .hover-image-circle { transform: scale(1); animation: ripple 0.3s linear; } @keyframes ripple { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } |
|
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 |
.hover-image-3 * { box-sizing: border-box; } .hover-image-3 { overflow: hidden; display: inline-block; position: relative; line-height: 0; } .hover-image-3 a span { display: block; position: absolute; width: 50px; height: 50px; right: 10px; bottom: 10px; filter: drop-shadow(0 0 6px black); z-index: 2; background: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQ4NS4yMTMgNDg1LjIxMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDg1LjIxMyA0ODUuMjEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQ3MS44ODIsNDA3LjU2N0wzNjAuNTY3LDI5Ni4yNDNjLTE2LjU4NiwyNS43OTUtMzguNTM2LDQ3LjczNC02NC4zMzEsNjQuMzIxbDExMS4zMjQsMTExLjMyNCAgICBjMTcuNzcyLDE3Ljc2OCw0Ni41ODcsMTcuNzY4LDY0LjMyMSwwQzQ4OS42NTQsNDU0LjE0OSw0ODkuNjU0LDQyNS4zMzQsNDcxLjg4Miw0MDcuNTY3eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik0zNjMuOTA5LDE4MS45NTVDMzYzLjkwOSw4MS40NzMsMjgyLjQ0LDAsMTgxLjk1NiwwQzgxLjQ3NCwwLDAuMDAxLDgxLjQ3MywwLjAwMSwxODEuOTU1czgxLjQ3MywxODEuOTUxLDE4MS45NTUsMTgxLjk1MSAgICBDMjgyLjQ0LDM2My45MDYsMzYzLjkwOSwyODIuNDM3LDM2My45MDksMTgxLjk1NXogTTE4MS45NTYsMzE4LjQxNmMtNzUuMjUyLDAtMTM2LjQ2NS02MS4yMDgtMTM2LjQ2NS0xMzYuNDYgICAgYzAtNzUuMjUyLDYxLjIxMy0xMzYuNDY1LDEzNi40NjUtMTM2LjQ2NWM3NS4yNSwwLDEzNi40NjgsNjEuMjEzLDEzNi40NjgsMTM2LjQ2NSAgICBDMzE4LjQyNCwyNTcuMjA4LDI1Ny4yMDYsMzE4LjQxNiwxODEuOTU2LDMxOC40MTZ6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTc1LjgxNywxODEuOTU1aDMwLjMyMmMwLTQxLjgwMywzNC4wMTQtNzUuODE0LDc1LjgxNi03NS44MTRWNzUuODE2QzEyMy40MzgsNzUuODE2LDc1LjgxNywxMjMuNDM3LDc1LjgxNywxODEuOTU1eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo="); background-repeat: no-repeat; background-size: cover; } .hover-image-3 .hover-image-circle { position: absolute; border-radius: 50%; background: #bfe2ff; right: -35px; bottom: -35px; width: 140px; height: 140px; transform: scale(0); transition: all 0.3s linear; } .hover-image-3 a:hover .hover-image-circle { transform: scale(1); animation: ripple 0.3s linear; } @keyframes ripple { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } |
Вариант 4
Варианты со свингом.
Вариант A со шрифтов FontAwesome и горизонтальным свингом.
Вариант B c графической иконкой zoom.png и вертикальным свингом.
Горизонтальный свинг и шрифт: A
Вертикальный свинг и иконка: B
|
1 2 3 4 5 6 |
<div class="hover-image-4"> <a href="image-large.jpg"> <img src="image.jpg" alt="" /> <i class="fa fa-search"></i> </a> </div> |
|
1 2 3 4 5 6 |
<div class="hover-image-4"> <a href="image-large.jpg"> <img src="image.jpg" alt="" /> <img src="zoom.png" alt="" /> </a> </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 51 52 53 54 55 56 57 58 59 60 61 62 63 |
.hover-image-4 * { box-sizing: border-box; } .hover-image-4 a { position: relative; overflow: hidden; display: inline-block; } .hover-image-4 a:hover img:first-child { animation: swing 0.6s ease; } .hover-image-4 img + img, .hover-image-4 img + i { display: block; position: absolute; top: -100px; right: 20px; width: 64px; height: 64px; color: #FFF; font-size: 64px; text-align: center; transition: all 0.5s ease-in-out; filter: drop-shadow(0 0 6px #CCC); } .hover-image-4 a:hover img + img, .hover-image-4 a:hover img + i { animation: fromtop 0.6s ease forwards; } @keyframes fromtop { 30% { top: -100px; } 50% { top: calc(100% - 84px); } 65% { top: calc(100% - 110px); } 100% { top: calc(100% - 84px); } } @keyframes swing { 15% { transform: translateX(9px); } 30% { transform: translateX(-9px); } 40% { transform: translateX(6px); } 50% { transform: translateX(-6px); } 65% { transform: translateX(3px); } 100% { transform: translateX(0); } } |
|
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 51 52 53 54 55 56 57 58 59 60 61 62 63 |
.hover-image-4 * { box-sizing: border-box; } .hover-image-4 a { position: relative; overflow: hidden; display: inline-block; } .hover-image-4 a:hover img:first-child { animation: swing 0.6s ease; } .hover-image-4 img + img, .hover-image-4 img + i { display: block; position: absolute; top: -100px; right: 20px; width: 64px; height: 64px; color: #FFF; font-size: 64px; text-align: center; transition: all 0.5s ease-in-out; filter: drop-shadow(0 0 6px #CCC); } .hover-image-4 a:hover img + img, .hover-image-4 a:hover img + i { animation: fromtop 0.6s ease forwards; } @keyframes fromtop { 30% { top: -100px; } 50% { top: calc(100% - 84px); } 65% { top: calc(100% - 110px); } 100% { top: calc(100% - 84px); } } @keyframes swing { 15% { transform: translateY(9px); } 30% { transform: translateY(-9px); } 40% { transform: translateY(6px); } 50% { transform: translateY(-6px); } 65% { transform: translateY(3px); } 100% { transform: translateY(0); } } |
Вариант 5
Классический ховер-эффект с полосками, который изменил немного под себя.
Пример имеет 2 варианта иконки увеличения изображения - это шрифт FontAwesome и графическая zoom.png.
Шрифт FontAwesome: A
Графическая иконка: B
|
1 2 3 4 5 6 7 8 |
<div class="hover-image-5"> <a href="image-large"> <img src="image.jpg" alt="" /> <div> <i class="fa fa-search"></i> </div> </a> </div> |
|
1 2 3 4 5 6 7 8 |
<div class="hover-image-5"> <a href="image-large"> <img src="image.jpg" alt="" /> <div> <img src="zoom.png" alt="" /> </div> </a> </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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
.hover-image-5 a { position: relative; z-index: 1; display: inline-block; overflow: hidden; height: auto; text-align: center; background: #bfe2ff; } .hover-image-5 a img { opacity: 1; transition: opacity 0.5s; position: relative; max-width: 100%; height: auto; display: block; } .hover-image-5 a:hover img { opacity: 0.5; } .hover-image-5 a div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hover-image-5 a div::before, .hover-image-5 a div::after { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; content: ""; opacity: 0; transition: opacity 0.5s, transform 0.5s; pointer-events: none; } .hover-image-5 a div::before { border-top: 2px solid #fff; border-bottom: 2px solid #fff; transform: scale(0, 1); } .hover-image-5 a div::after { border-right: 2px solid #fff; border-left: 2px solid #fff; transform: scale(1, 0); } .hover-image-5 a:hover div::before, .hover-image-5 a:hover div::after { opacity: 1; transform: scale(1); } .hover-image-5 div img, .hover-image-5 div i { display: block; position: absolute; top: 50%; left: 50%; margin-top: -24px; margin-left: -24px; width: 48px; height: 48px; transition: transform 0.5s ease 0s; transform: scale(0); font-size: 48px; color: #fff; } .hover-image-5 a:hover div img, .hover-image-5 a:hover div i { transform: scale(1); opacity: 1; } |
Вариант 6
Данный пример также имеет 2 варианта иконки увеличения изображения (шрифт FontAwesome и графическая zoom.png).
Шрифт FontAwesome: A
Графическая иконка: B
|
1 2 3 4 5 6 |
<div class="hover-image-6"> <a href="image-large.jpg"> <img src="image" alt="" /> <i class="fa fa-search"></i> </a> </div> |
|
1 2 3 4 5 6 |
<div class="hover-image-6"> <a href="image-large.jpg"> <img src="image" alt="" /> <img src="zoom.png" alt="" /> </a> </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 51 52 53 54 55 56 57 58 59 60 61 62 |
.hover-image-6 { position: relative; overflow: hidden; display: inline-block; line-height: 0; } .hover-image-6 a { vertical-align: middle; } .hover-image-6 img + img, .hover-image-6 img + i { display: block; position: absolute; top: 50%; left: 50%; margin-top: -32px; margin-left: -32px; width: 64px; height: 64px; transition: transform 0.7s ease 0s; transform: scale(0); font-size: 64px; color: #fff; z-index: 1; } .hover-image-6 a:hover img + img, .hover-image-6 a:hover img + i { transform: scale(1); opacity: 1; } .hover-image-6 a::before { transition: all 0.5s ease; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #bfe2ff; transform: scale(0); } .hover-image-6 a:hover::before { opacity: 0.5; transform: scale(1); } .hover-image-6 a::after { transition: all 0.6s ease 0.2s; content: ""; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; border: 1px solid #aaa; background: #337ab7; opacity: 0; transform: scale(0); } .hover-image-6 a:hover::after { opacity: 0.35; transform: scale(1); } |
Вариант 7
Еще один пример с двумя вариантами иконки увеличения изображения (шрифт FontAwesome и графическая zoom.png).
|
1 2 3 4 5 6 7 8 |
<div class="hover-image-7"> <img src="image.jpg" alt=""/> <div> <i class="fa fa-search"></i> <div class="curl"></div> <a href="image-large.jpg"></a> </div> </div> |
|
1 2 3 4 5 6 7 8 |
<div class="hover-image-7"> <img src="image.jpg" alt=""/> <div> <img src="zoom.png" alt="" /> <div class="curl"></div> <a href="image-large.jpg"></a> </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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
.hover-image-7 * { box-sizing: border-box; } .hover-image-7 { color: #fff; position: relative; overflow: hidden; display: inline-block; background: #337ab7; line-height: 0; } .hover-image-7 img { opacity: 1; transition: opacity 0.35s; } .hover-image-7 > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hover-image-7 > div::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; opacity: 0; transition: opacity 0.4s; background-image: linear-gradient( 45deg, #337ab7 0%, transparent 40%, rgba(255, 255, 255, 0.15) ); } .hover-image-7:hover > div::before { opacity: 1; } .hover-image-7 i, .hover-image-7 div img { transition: opacity 0.35s; display: inline-block; font-size: 36px; width: 30px; height: 30px; color: #fff; position: absolute; bottom: 12px; left: 12px; opacity: 0; z-index: 1; } .hover-image-7:hover i, .hover-image-7:hover div img { opacity: 1; } .hover-image-7 .curl { width: 0px; height: 0px; position: absolute; bottom: 0; left: 0; background: linear-gradient( 225deg, #ffffff, #f3f3f3 20%, #bbbbbb 38%, #aaaaaa 44%, #888888 50%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.3) ); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); transition: all 0.4s ease; } .hover-image-7 .curl:before, .hover-image-7 .curl:after { content: ""; position: absolute; z-index: -1; left: 12%; bottom: 6%; width: 70%; max-width: 300px; max-height: 100px; height: 55%; box-shadow: 0 12px 15px rgba(0, 0, 0, 0.3); transform: skew(-10deg) rotate(-6deg); } .hover-image-7 .curl:after { left: auto; right: 6%; bottom: auto; top: 14%; transform: skew(-15deg) rotate(-84deg); } .hover-image-7 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; } .hover-image-7:hover .curl { width: 90px; height: 90px; } |
Вариант 8
Последний вариант очень простой, но имеет массу возможностей. Реализован он с использованием CSS-фильров
К примеру можно подогнать цвета галереи под цвета вашего сайта.
|
1 2 3 4 5 |
<div class="hover-image-8"> <a href="image-large.jpg"> <img src="image.jpg" alt="" /> </a> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.hover-image-8 a { display: inline-block; background: #0083ff; line-height: 0; } .hover-image-8 a img { transition: filter 0.5s linear; filter: brightness(2) grayscale(1) opacity(0.5); } .hover-image-8 a:hover img { filter: none; } |
Здравствуйте! Почему-то на Опенкарте не работает. Вообще ничего не отображает. Пробовал установить последний.
Здравствуйте! А может быть Вы могли подсказать, как сюда ещё добавить текст? Хотелось бы, чтобы он отображался вместе с изображением 🙂
Спасибо Вам за работу! Эффекты классные!
Вот например:
3D hover-эффект и Выдвигающееся описание для фотографий
Или можно на этих примерах вместо иконки написать текст и немного подредактить, как тут
Здравствуйте. Подскажите, я правильно поняла, что нужно иметь на сервере и image.jpg и image-large.jpg?
Это любые картинки, которые будут отображаться в миниатюрах и по клику.
image-large.jpg - та что открывается
image.jpg - на которой эффект (превью)
Спасибо за привлекательное решение.
Дополните пожалуйста, как настроить вывод большого изображения — без перехода на новую страницу сайта?
Чтобы изображение всплывало и не открывалось как новая страница...
Для этого нужно использовать какое-нибудь решение для модальных окон/галерей.
Например fancybox
Спасибо за оперативный ответ. Буду пробовать
Спс !!! Это а*уенно!!
Супер !!! Спс !!!