При наведении на текст, появляется скрытый текст — BlogGood.ru

Появление картинки в блоке, при наведении на элемент из списка

Пример кода на HTML, CSS и JavaScript, который реализует появление картинки при наведении на элемент.

Если у вас есть блок с несколькими элементами и область, где должна появляться картинка при наведении на эти элементы, то вы можете использовать следующее решение.

Шаг 1: Добавление элементов и области для картинки

Добавьте в HTML-разметку два блока: один блок с элементами, на которые будете наводить, а другой блок для отображения картинки. Например:

 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
 

Шаг 2: CSS-стилизация

Добавьте CSS-стили для элементов и области с картинкой. Например:

.item-block < display: flex; justify-content: space-between; >.item < width: 23%; border: 1px solid #ccc; padding: 10px; >.image-block < position: relative; width: 100%; height: 300px; >.image

Шаг 3: JavaScript-скрипт

JavaScript

// Получаем все элементы item и один элемент image const items = document.querySelectorAll('.item'); const image = document.querySelector('.image'); // Для каждого элемента item добавляем обработчики событий mouseover и mouseleave. // При mouseover показываем соответствующую картинку в элементе image // При mouseleave скрываем элемент image items.forEach(item => < item.addEventListener('mouseover', () =>< const imageUrl = `images/$.jpg`; image.setAttribute('src', imageUrl); image.style.display = 'block'; >); item.addEventListener('mouseleave', () => < image.style.display = 'none'; >); >); 

jQuery

$(document).ready(function() < // Для каждого элемента item добавляем обработчики событий mouseover и mouseleave. // При mouseover показываем соответствующую картинку в элементе image // При mouseleave скрываем элемент image $('.item').on('mouseover', function() < const imageUrl = `images/$.jpg`; $('.image').attr('src', imageUrl).show(); >).on('mouseleave', function() < $('.image').hide(); >); >); 

Шаг 4: Загрузка изображений

Добавьте изображения в папку «images» и назовите их так же, как и текст элементов. Например, «Item 1.jpg», «Item 2.jpg» и т.д.

Готово! Теперь при наведении на элемент появится соответствующая картинка в области для картинки.

Источник

Всплывающая картинка при наведении на ссылку на CSS

Здравствуйте, друзья! На моем блоге уже есть информация о всплывающих подсказках на CSS, но сегодня будем делать еще более интересный эффект, это всплывающие картинки при наведении курсора. Этот эффект имеет достаточно широкое применение, но я все чаще замечаю подобное на интернет-магазинах, где при наведении на название товара, появляется его изображение или же увеличение картинки при наведении. Конечно такие эффекты можно разнообразить с использованием JavaScript или jQuery, но мы с вами воздержимся от всевозможных скриптов и будем делать всплывающие картинки только на CSS. Надеюсь, что вы уже знаете, что такое псевдокласс hover. Вот Его-то мы и будем использовать в наших всплывающих картинках и вот, что у нас должно получится.

Первое, что нужно сделать, это добавить в файл стилей следующий код:

1 2 3 4 5 6 7 8 9 10 11 12 13

.tooltip span{ border-radius: 5px 5px 5px 5px; visibility: hidden; position: absolute; left: 200px; background: #fff; box-shadow: -2px 2px 10px -1px #333; border-radius: 5px; } .tooltip:hover span{ visibility: visible; }

Теперь, к ссылкам нужно прописать класс tooltip и в теге span разместить ссылку на картинку. Выглядит это вот так:

a class="tooltip" href="#">Анкор ссылкиspan>img src="image.png"/>/span>/a>

С абсолютным позиционированием могут возникнуть проблемы, если вы делаете эффект всплывающих изображений к разным элементам на странице. Картинки могут всплывать не в том месте, где вам нужно. Но это вполне поправимо и можно исправить при помощи отступов. Ну вот, теперь вы знаете как сделать увеличение картинки при наведении мыши с помощью CSS. Используйте данный код для экспериментов, возможно что-то интересное у вас все же получится. при помощи CSS еще можно сделать таблицу зебру. Все вопросы о том, куда вставлять код и т.п. — писать в комментариях. 🙂 А еще я попрошу вас поделиться этой записью в социальных сетях. Заранее благодарю.

Источник

Изображение при наведении на ссылку

Если первый вариант идет со стилями, и в них нужно выставлять основу изображение, то во втором уже размещение проходит в 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 поставить ту палитру цвета, что соответствует дизайну.

.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;
>

Второй вариант намного проще, где также можно поставить ссылку на изображение, где если брать первый, то там безусловно сделан для того, что выставляют картинку под информацию, что будет постоянно указана в материале.

Здесь же вы можете все поставить на время под определенную ссылку, где пользователь наведет и увидеть изображение или как примет стиль тетрадного листа с описанием.

Источник

Картинка при наведении на ссылку

При наведении на ссылку вместо текста картинка
Появилась идея, а как реализовать её не найти. в хтмл хочу сделать чтобы при наведении на ссылку.

A:active при наведении на ссылку появляется картинка background
http://www.31.kz/ на главной странице есть переключатель языков,как сделать подобное?заранее.

Картинка всплывает при наведении на ссылку/текст. Как сделать?
Здравствуйте! Изучил немало тем (в том числе и на этом сайте) по этому вроде простому вопросу.

Картинка при наведении
Здравствуйте, меня интересует, можно ли сделать так, что бы при наведении на какой нить текст возле.

блок с картинкой помещаешь внутри ссылки и делаешь его невидимым и с позишин абсолют, потом в стилях при ховере на ссылку делаешь видимой картинку! если надо завтра с утра могу с бацать, а то сегодня уже бошка не варит.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

a href="#" id="link">Наведи на меня/span> img src="https://www.cyberforum.ru/images/cyberforum_logo.png" id="img"/> style> #img < position:absolute; >/style> script> $('#img').hide(); $('#link').mouseover(function() < $('#img').show(); >); $('#link').mouseleave(function() < $('#img').hide(); >); /script>

Да, можно обычным css обойтись.
www.cssportal.com/css-tooltip-generator/
Там где написано Tooltip, вот туда можешь картинку засунуть.

a class="tooltips" href="#">ССЫЛКА span>img src="http://img1.liveinternet.ru/images/attach/b/0/10189/10189692_12681838.gif"/>/span>/a>

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

a.tooltips { left:25%; top:150px; position: relative; display: inline; } a.tooltips span { position: absolute; width:140px; color: white; background: #CCC; height: 100px; line-height: 64px; text-align: center; visibility: hidden; border-radius: 6px; } a.tooltips span:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; border-top: 8px solid #000000; border-right: 8px solid transparent; border-left: 8px solid transparent; } a:hover.tooltips span { visibility: visible; opacity: 0.8; bottom: 30px; left: 50%; margin-left: -76px; z-index: 999; }

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

a class="tooltips" href="http://images.vfl.ru/ii/1418140466/cccf1a57/7178618.jpg">прапрап span>img src="http://images.vfl.ru/ii/1418140466/cccf1a57/7178618.jpg"/>/span>/a> script> a.tooltips < left:25%; top:150px; position: relative; display: inline; >a.tooltips span < position: absolute; width:140px; color: white; background: #CCC; height: 100px; line-height: 64px; text-align: center; visibility: hidden; border-radius: 6px; >a.tooltips span:after < content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; border-top: 8px solid #000000; border-right: 8px solid transparent; border-left: 8px solid transparent; >a:hover.tooltips span < visibility: visible; opacity: 0.8; bottom: 30px; left: 50%; margin-left: -76px; z-index: 999; >/script>

Добавлено через 1 час 54 минуты
Поможеш?

Добавлено через 12 секунд
KitoChimoto, Поможеш?

Сообщение было отмечено hakerol как решение

Решение

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

 head> meta charset="utf-8" /> title>картинка при наведении на ссылку/title> style> a img < width:100px; height:100px; position:absolute; visibility:hidden; >a:hover >img < visibility:visible; >/style> /head> body> a src="#">ССЫЛКАimg src="">/a> /body> /html>

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

 head> meta charset="utf-8" /> title>картинка при наведении на ссылку/title> style> a img < width:100px; height:100px; margin:10px; position: relative; left: -50px; top: -50px; visibility:hidden; >a:hover >img < visibility:visible; >/style> /head> body> a src="">kimg src="http://images.vfl.ru/ii/1418140466/cccf1a57/7178618.jpg">/a> /body> /html>

нужно указать размеры для картинки в пикселях(width или height), а то судя по всему у там размеры 100% стоят, ну или можно само фото на фотошопе уменьшить, ну это крайний вариант.

Размер не меняется.
а, и еще фейл. пропадает изображение как здесь http://www.volunteer.org.ua/media/foto/

Сообщение было отмечено hakerol как решение

Решение

a src="#">cdbsmbcc img src="" style="width:50px;height:50px;">/a>

Источник

При наведении на текст, появляется скрытый текст или картинка. Пример на CSS

Салютики!
Мне на ушко прошептал wordstat.yandex.ru, что вы ищите эффект, когда при наведении на текст появляется скрытый текст или картинка. В этой статье я не только выложу код этого эффекта, но и покажу, как сделать, чтобы при наведении текст или картинка появлялись и исчезали. Код не сложный, написан на обычном HTML+CSS.
Этот эффект можно использовать:

— если нужно вставить скрытую подсказку к слову;

— если нужно показать ответ на загадку;

— если нужно показать вариант ответа на тест;

○ При наведении на текст, появляется скрытый текст

В HTML вставьте вот этот код:

.bloggood-ru-div < display: none; >a.bloggood-ru-ssilka:hover+div

    .bloggood-ru-div < display: none; >a.bloggood-ru-ssilka:hover+div    

○ При наведении на текст, появляется картинка

В HTML вставьте вот этот код:

.bloggood-ru-div < display: none; >a.bloggood-ru-ssilka:hover+div

    .bloggood-ru-div < display: none; >a.bloggood-ru-ssilka:hover+div  

    .bloggood-ru-div < display: block; >a.bloggood-ru-ssilka:hover+div    

    .bloggood-ru-div < display: block; >a.bloggood-ru-ssilka:hover+div