Изображение при наведении на ссылку
 | |
| Оригинальное решение для тематических сайтов, как появление картинки при наведении на ссылку для перехода, где задействованы чистые стили CSS. Как можно наблюдать на закрепленном снимке, то такой эффект не на все тематики подойдет. Но с другой стороны, здесь можно просто изменить картинку и сделать более близкой к теме сайта. Где для этого рассмотрим сразу несколько вариантов внедрение такого эффекта. Если первый вариант идет со стилями, и в них нужно выставлять основу изображение, то во втором уже размещение проходит в HTML. Такой подход безусловно оригинальный, но действующий по своей информатике, ведь переходя по ссылки вы изначально видите тему, как наглядная графическая информация. Где во многих случаях размещение информации станет востребован в использования данного метода. Первый вариант: HTML Код <div class="stavleniya uchayak"> <div class="kicheson"> <div class="vanormad"> <p>Здесь идет краткое описание и подходим к ссылке <a class="myskina" href="#">где нужно вачести сбда клик</a> и уведите изображение</p> </div> </div> </div> CSS Код .stavleniya { display: table; height: 100%; width: 100%; background: #2D2D2D; background: -webkit-radial-gradient(circle closest-side at center, #5a5959, #312f2f); background: -moz-radial-gradient(circle closest-side at center, #5a5959, #312f2f); background: -ms-radial-gradient(circle closest-side at center, #5a5959, #312f2f); background: radial-gradient(circle closest-side at center, #5a5959, #312f2f); } .kicheson { display: table-cell; vertical-align: middle; } .uchayak, .vanormad { text-align: center; margin: 0 auto; } h1 { font-size: 5em; letter-spacing: 18px; color: #FFCC00; margin: -1em 0 0 0; text-shadow: 4px 4px 18px #111; } @keyframes wave { 0% { transform: rotate(8deg); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-10deg); } 100% { transform: rotate(8deg); } } @-webkit-keyframes wave { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(10deg); } 100% { -webkit-transform: rotate(0deg); } } p { font-size: 110%; font-family: Helvetica, sans; max-width: 24em; margin: 0 auto; text-align: justify; color: #afafaf; font-weight: lighter; line-height: 1.5em; } a { color: #dcd5d5; text-decoration: none; border-bottom: solid thin #f7901d; } a:hover { color: #ec830c; } .myskina { position: relative; } .myskina:before, .myskina:after { position: absolute; transition: all 0.15s ease; } .myskina:before { top: -75px; left: -70px; -webkit-transform:rotate(0deg) scale(0); -moz-transform:rotate(0deg) scale(0); -o-transform:rotate(0deg) scale(0); -ms-transform:rotate(0deg) scale(0); transform:rotate(0deg) scale(0); } .myskina:after { top: -115px; right: -70px; -webkit-transition-delay: 0.05s; transition-delay: 0.05s; -webkit-transform:rotateY(180deg) scale(0); -moz-transform:rotateY(180deg) scale(0); -o-transform:rotateY(180deg) scale(0); -ms-transform:rotateY(180deg) scale(0); transform:rotateY(180deg) scale(0); } .myskina:hover:before { top: -140px; -webkit-transform:rotate(15deg) scale(1); -moz-transform:rotate(15deg) scale(1); -o-transform:rotate(15deg) scale(1); -ms-transform:rotate(15deg) scale(1); transform:rotate(15deg) scale(1); } .myskina:hover:after { -webkit-transform:rotateY(180deg) scale(0.7); -moz-transform:rotateY(180deg) scale(0.7); -o-transform:rotateY(180deg) scale(0.7); -ms-transform:rotateY(180deg) scale(0.7); transform:rotateY(180deg) scale(0.7); } .myskina:before, .myskina:after { content: url('Ссылка на картинку'); } Здесь по умолчанию идет оформление ключевого слова или текста, что будет подчеркнуто в светло желтом оттенке, так как вся стилистика настроена под темный дизайне сайта. Если у вас светлый, то вам просто нужно в CSS поставить ту палитру цвета, что соответствует дизайну. Демонстрация Второй вариант: HTML Код <a class="mekina-buleva" href="/">НАВЕДИ НА МЕНЯ КУРСОР<span><img class="klass" src="http://zornet.ru/_fr/83/s0899052.jpg"></span></a> CSS Код .mekina-buleva span{ border-radius: 5px 5px 5px 5px; visibility: hidden; position: absolute; left: 258px; background: #f1eaea; box-shadow: -2px 2px 10px -1px #2f2e2e; border-radius: 5px; width: 18%; z-index: 9999; } .mekina-buleva:hover span{ visibility: visible; } Второй вариант намного проще, где также можно поставить ссылку на изображение, где если брать первый, то там безусловно сделан для того, что выставляют картинку под информацию, что будет постоянно указана в материале. Здесь же вы можете все поставить на время под определенную ссылку, где пользователь наведет и увидеть изображение или как примет стиль тетрадного листа с описанием. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
