Если первый вариант идет со стилями, и в них нужно выставлять основу изображение, то во втором уже размещение проходит в HTML. Такой подход безусловно оригинальный, но действующий по своей информатике, ведь переходя по ссылки вы изначально видите тему, как наглядная графическая информация. Где во многих случаях размещение информации станет востребован в использования данного метода.
Здесь идет краткое описание и подходим к ссылке где нужно вачести сбда клик и уведите изображение
.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;
>
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;
>
.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 поставить ту палитру цвета, что соответствует дизайну.
Второй вариант намного проще, где также можно поставить ссылку на изображение, где если брать первый, то там безусловно сделан для того, что выставляют картинку под информацию, что будет постоянно указана в материале.
Здесь же вы можете все поставить на время под определенную ссылку, где пользователь наведет и увидеть изображение или как примет стиль тетрадного листа с описанием.
Ну как то так смотрите codepen.io/reskwer/pen/jEyWew
файл Index.html
Второй файл CSS style.css
создайте эти 2 файла, положите в 1 папку, и будет вам счастье, можно красивую анимацию сделать transition — но думаю это перебор уже.
Доброго времени суток, друзья! Это очередная статья, написанная по просьбе одного из читателей моего блога. Сегодня мы реализуем возможность отображения картинки при наведении курсора мыши на ссылку. Зачем это может быть нужно? Все очень просто, таким способом можно сохранить пространство на сайте и вместе с тем оживить ссылки.
Как известно, реализовать всплывающие картинки можно при помощи jQuery, CSS, а также HTML. В сегодняшней статье я выложу готовый код этого эффекта, а также приведу несколько наглядных примеров. Каждый скрипт довольно простой, создан средствами CSS+HTML. Не стану вас больше томить и приведу готовые решения!
Загрузка...
