| Kosten | Пятница, 02 Февраля 2018, 08:03 | Сообщение 1 |
| Как вы знаете, что эффект Css Hover играет важную роль в разработке веб-сайта. В этом посте я хотел бы дать вам несколько лучших бесплатных эффектов css hover, которые помогут вашему сайту стать более привлекательным. Вашему вниманию новый эффект наведения, который может сделать аккуратный эффект, что работает на CSS. Идея состоит в том, чтобы иметь несколько эскизов, которые можно щелкнуть, и один раз щелкнуть, отображается соответствующее картинки. Где созданы переходы и присутствует красивая анимацию, что полностью создана на CSS, где будет возможность создать большое и необычное изображение.
Некоторое время назад была написана статью об эффекте наложения изображения, где были освещены основы об эффекте зависания изображения. В этой статье мы рассмотрим эффект скольжения заголовка изображения, где собираюсь показать, как создавать различные виды эффектов сглаживания слайдов изображения.
Эффекты заголовка изображения являются очень приятным способом представления содержимого по изображениям, и в наши дни многие разработчики могут реализовать эти эффекты на своих сайтах. Прежде чем копать код, позвольте мне объяснить основную тему об эффекте скольжения заголовка изображения, когда пользователь наводится на изображение, мы видим, что скользящее содержимое перемещается по изображению.
Начнем кодирование
1. Сначала рассмотрим родительский элемент div с id:wrapper и Inside, который рассмотрит 8 элементов div сclass:image-container.
2. Внутри каждого дочернего элемента div рассмотрим изображение и еще один элемент div, а каждый элемент div имеет два разных класса, в которых один класс является одинаковым для всех элементов дочернего div и другого класса, что различны для всех дочерние элементы div.
3. Теперь создадим родительский элемент div, установив width:1080px и margin:50px auto; так что содержимое находится в середине браузера.
Код #wrapper{
width: 1080px;
margin: 50px auto;
}
4. Теперь стилизовать все дочерние элементы Div, установив его width:250px; и height:200px; float:left;и position:relative; так что мы получаем контроль над элементами DIV.
Код .image-container{
width: 250px;
height: 200px;
position: relative;
cursor: pointer;
float: left;
margin: 10px;
}
5. Теперь создайте образ, установив его ширину и высоту, равную 100%, и position:absolute;чтобы она находилась внутри родительского элемента div.
Код .image-container img{
width: 100%;
height: 100%;
position: absolute;
}
6. Теперь создадим элементы дочернего div, здесь будет создан первый класс, class:image-caption который является таким же для всех элементов дочернего div, а другой класс для всех дочерних элементов div, который используется для эффекта подгонки.
Код .image-container .image-caption {
width: 100%;
height: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.6);
font-family: cursive;
text-align: center;
}
Для достижения эффекта скользящей субтитры нам нужно настроить таргетинг на элементы div, второго класса . Как было упомянуто выше, каждый элемент div дочернего элемента имеет два разных класса, в которых один класс является одним и тем же для всех элементов div и другого класса, которые различаются для всех элементов
Левый сдвиг субтитров эффект
Чтобы добиться эффекта как левая скользящая подпись , создайте второй класс элемента вспомогательного дочернего элемента div: class:caption-1. Теперь установите скользящую подпись в left: -260px; исходное положение, а затем всякий раз когда мы наводим верх на .image-containerней, она должна вернуться в исходное положение, чтобы достичь этого набора left:0; и использовать эффект перехода для скользящего заголовка.
Код .image-container .caption-1 {
left: -260px;
transition: all 0.5s;
}
.image-container:hover .caption-1 {
left: 0;
transition: all 0.5s;
}
Эффект верхней скользящей подписи
Чтобы достигнуть эффекта верхней скользящей надписи, создайте второй класс элемента вспомогательного дочернего элемента div class:caption-2, а именно: Теперь установите скользящую подпись в top:-210px;исходное положение, а затем всякий раз, когда мы наводим верх над .image-containerней, она должна вернуться в исходное положение. для достижения этого установите top:0; и используйте эффект перехода для скользящей надписи.
Код .image-container .caption-2 {
top: -210px;
transition: all 0.5s;
}
.image-container:hover .caption-2 {
top: 0;
transition: all 0.5s;
}
Эффект нижней скользящей надписи
Чтобы достичь эффекта, как Поднимите нижний элемент, создайте второй класс элемента вспомогательного дочернего элемента div: class:caption-3. Теперь установите скользящую подпись в bottom: -210px; исходное положение, а затем всякий раз, когда мы наводим верх над .image-containerней, она должна вернуться в исходное положение. для достижения этого установите bottom:0; и используйте эффект перехода для скользящей надписи.
Код .image-container .caption-3 {
bottom: -210px;
transition: all 0.5s;
}
.image-container:hover .caption-3 {
bottom: 0;
transition: all 0.5s;
}
Эффект правого скользящего субтитра
Чтобы добиться эффекта, как Прямая скользящая подпись, то создайте второй класс элемента дочернего элемента div, который: class:caption-4. Теперь установите скользящую подпись в right: -260px; исходное положение, а затем всякий раз, когда мы наводим верх над .image-containerней, она должна вернуться в исходное положение, для достижения этого установите right:0; и используйте эффект перехода для скользящей надписи.
Код .image-container .caption-4 {
right: -260px;
transition: all 0.5s;
}
.image-container:hover .caption-4 {
right: 0;
transition: all 0.5s;
}
Верхний левый эффект подгонки
Чтобы достичь эффекта на верхний левый угол, то создайте второй класс элемента дочернего элемента div, который class:caption-5. Теперь задает скользящую подпись в top: -210px; left: -260px; исходное положение, а затем всякий раз, когда мы наводим верх над .image-containerней, она должна вернуться в исходное положение, для достижения этого установите top: 0; left: 0; и используйте эффект перехода для скользящей надписи.
Код .image-container .caption-5 {
left: -260px;
top: -210px;
transition: all 0.5s;
}
.image-container:hover .caption-5 {
left: 0;
top: 0;
transition: all 0.5s;
}
Эффект верхнего правого скользящего субтитров
Чтобы добиться эффекта верхний правый скользящий субтитр, то нужно создать второй класс элемента дочернего элемента div, который: class:caption-6. Теперь установите скользящую подпись в top: -210px; right: -260px;исходное положение, а затем всякий раз, когда мы наводим верх над .image-containerней, она должна вернуться в исходное положение, для достижения этого установите top: 0; right: 0; и используйте эффект перехода для скользящей надписи.
Код .image-container .caption-6 {
right: -260px;
top: -210px;
transition: all 0.5s;
}
.image-container:hover .caption-6 {
right: 0;
top: 0;
transition: all 0.5s;
}
Эффект нижней подгонки снизу вверх
Чтобы добиться эффекта нижний левый угол сглаживания, то создайте второй класс элемента div, который: class:caption-7. Теперь установите скользящую подпись в bottom: -210px; left: -260px; исходное положение, а затем всякий раз, когда мы наводим верх над .image-containerней, она должна вернуться в исходное положение, для достижения этого установите bottom: 0; left: 0; и используйте эффект перехода для скользящей надписи.
Код .image-container .caption-7 {
left: -260px;
bottom: -210px;
transition: all 0.5s;
}
.image-container:hover .caption-7 {
left: 0;
bottom: 0;
transition: all 0.5s;
}
Эффект сглаживания в нижнем правом направлении
Чтобы добиться эффекта, как снизу правый», здесь создаете второй класс элемента дочернего элемента div: class:caption-8. Теперь установите скользящую подпись в bottom: -210px; right: -260px; исходное положение, а затем всякий раз, когда мы наводим верх над .image-containerней, она должна вернуться в исходное положение. для достижения этого установите bottom: 0; right: 0; и используйте эффект перехода для скользящей надписи.
Код .image-container .caption-8 {
right: -260px;
bottom: -210px;
transition: all 0.5s;
}
.image-container:hover .caption-8 {
right: 0;
bottom: 0;
transition: all 0.5s;
}
Вот как эффект скользящей надписи работает без overflow:hidden;свойства, поэтому установите overflow:hidden;значение .image-container. так что он скрывает содержимое, которое вытекает из image-continer.
Код .image-container {
over-flow: hidden;
}
Основной код:
Код <div id="zornet_ru_ludsam"> <div class="kalibrovka_zornet_rudsan"> <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/5V2Fu_zjT6C_3jUzNLZILA.png" /> <div class="image-caption caption-1"> <h1>ZorNet.Ru</h1> <p>ZorNet.Ru: Создание сайта на uCoz.</p> </div> </div> <div class="kalibrovka_zornet_rudsan"> <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/5V2Fu_zjT6C_3jUzNLZILA.png" /> <div class="image-caption caption-2"> <h1>ZorNet.Ru</h1> <p>ZorNet.Ru: Создание сайта на uCoz.</p> </div> </div> <div class="kalibrovka_zornet_rudsan"> <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/5V2Fu_zjT6C_3jUzNLZILA.png" /> <div class="image-caption caption-3"> <h1>ZorNet.Ru</h1> <p>ZorNet.Ru: Создание сайта на uCoz.</p> </div> </div> <div class="kalibrovka_zornet_rudsan"> <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/5V2Fu_zjT6C_3jUzNLZILA.png" /> <div class="image-caption caption-4"> <h1>ZorNet.Ru</h1> <p>ZorNet.Ru: Создание сайта на uCoz.</p> </div> </div> <div class="kalibrovka_zornet_rudsan"> <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/5V2Fu_zjT6C_3jUzNLZILA.png" /> <div class="image-caption caption-5"> <h1>ZorNet.Ru</h1> <p>ZorNet.Ru: Создание сайта на uCoz.</p> </div> </div> <div class="kalibrovka_zornet_rudsan"> <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/5V2Fu_zjT6C_3jUzNLZILA.png" /> <div class="image-caption caption-6"> <h1>ZorNet.Ru</h1> <p>ZorNet.Ru: Создание сайта на uCoz.</p> </div> </div> <div class="kalibrovka_zornet_rudsan"> <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/5V2Fu_zjT6C_3jUzNLZILA.png" /> <div class="image-caption caption-7"> <h1>ZorNet.Ru</h1> <p>ZorNet.Ru: Создание сайта на uCoz.</p> </div> </div> <div class="kalibrovka_zornet_rudsan"> <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/5V2Fu_zjT6C_3jUzNLZILA.png" /> <div class="image-caption caption-8"> <h1>ZorNet.Ru</h1> <p>ZorNet.Ru: Создание сайта на uCoz.</p> </div> </div> </div>
CSS
Код #zornet_ru_ludsam {
width: 1080px;
margin: 50px auto;
}
.kalibrovka_zornet_rudsan {
width: 250px;
height: 200px;
position: relative;
cursor: pointer;
overflow: hidden;
float: left;
margin: 10px;
}
.kalibrovka_zornet_rudsan img {
width: 100%;
height: 100%;
position: absolute;
}
.kalibrovka_zornet_rudsan .image-caption {
width: 100%;
height: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.6);
font-family: cursive;
text-align: center;
}
.image-caption h1 {
margin-top: 50px;
color: #fff;
}
.image-caption p {
color: #fff;
}
/* left slider */
.kalibrovka_zornet_rudsan .caption-1 {
left: -260px;
transition: all 0.5s;
}
.kalibrovka_zornet_rudsan:hover .caption-1 {
left: 0;
transition: all 0.5s;
}
/* Top slider */
.kalibrovka_zornet_rudsan .caption-2 {
top: -210px;
transition: all 0.5s;
}
.kalibrovka_zornet_rudsan:hover .caption-2 {
top: 0;
transition: all 0.5s;
}
/* bottom slider */
.kalibrovka_zornet_rudsan .caption-3 {
bottom: -210px;
transition: all 0.5s;
}
.kalibrovka_zornet_rudsan:hover .caption-3 {
bottom: 0;
transition: all 0.5s;
}
/* right slider */
.kalibrovka_zornet_rudsan .caption-4 {
right: -260px;
transition: all 0.5s;
}
.kalibrovka_zornet_rudsan:hover .caption-4 {
right: 0;
transition: all 0.5s;
}
/* top-left */
.kalibrovka_zornet_rudsan .caption-5 {
left: -260px;
top: -210px;
transition: all 0.5s;
}
.kalibrovka_zornet_rudsan:hover .caption-5 {
left: 0;
top: 0;
transition: all 0.5s;
}
/* top-right slider */
.kalibrovka_zornet_rudsan .caption-6 {
right: -260px;
top: -210px;
transition: all 0.5s;
}
.kalibrovka_zornet_rudsan:hover .caption-6 {
right: 0;
top: 0;
transition: all 0.5s;
}
/* bottom-left slider */
.kalibrovka_zornet_rudsan .caption-7 {
left: -260px;
bottom: -210px;
transition: all 0.5s;
}
.kalibrovka_zornet_rudsan:hover .caption-7 {
left: 0;
bottom: 0;
transition: all 0.5s;
}
/* bottom-right slider */
.kalibrovka_zornet_rudsan .caption-8 {
right: -260px;
bottom: -210px;
transition: all 0.5s;
}
.kalibrovka_zornet_rudsan:hover .caption-8 {
right: 0;
bottom: 0;
transition: all 0.5s;
}
/* media queries */
@media all and (min-width: 0px) and (max-width: 920px) {
#zornet_ru_ludsam {
width: 540px;
margin: 50px auto;
}
}
Также все можете посмотреть, как все работает.
Демонстрация:
| | Страна: (RU) |
| |
