Эффект увеличения фото - HTML и CSS

nikolokaputik80 · 10.11.2015, 22:05

Код HTML:

<html>
<head>
    
<link rel="stylesheet" href="http://thefinishedbox.com/files/freebies/hoverzoom/css/style.css?v=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://thefinishedbox.com/files/freebies/hoverzoom/js/hover.zoom.js"></script>

<script>
$(function() {
$('.zoom').hoverZoom(); // Default
});
</script>
    
</head>
<body>



<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-1.jpg" alt="thumbnail" /></a>
<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-2.jpg" alt="thumbnail" /></a>
<a href="#" class="zoom" id="blue"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg" alt="thumbnail" /></a>





</body>
</html>

Привет!

если выполнить этот код что выше, то выведет 3 картинки и при наведении мыши на картину она плавно увеличеваеться

и идет затемнение всех 3 картинок также везде появляется изображение лупы, а мне нужно что бы при наведении на одну картинку она и только она увеличевалась и затемнялась и выводилось изображение лупы, сейчас с тремя такое, как мне сделать что бы только с одной картинкой такой эффект был?????

но есть одно условие что вот этот код я не могу править

Код HTML:

<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-1.jpg" alt="thumbnail" /></a>
<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-2.jpg" alt="thumbnail" /></a>
<a href="#" class="zoom" id="blue"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg" alt="thumbnail" /></a>

Naive · 10.11.2015, 22:59

ну если ты ниче не можешь, значит ты ниче не можешь.
Соболезную.

Вадим Мошев · 10.11.2015, 23:08

Вам здесь не нужен скрипт. Это всё делается на уровне CSS.

Для тегов IMG внутри ссылок пропишите атрибут ID и задайте им уникальном значение для каждой картинки.

Далее для увеличения и появления лупы пишите такой код CSS:

Код:

.zoom:after {
  position: absolute;
  content: '';
  display: none;
  background-image: url("ПУТЬ К КАРТИКЕ С ЛУПОЙ");
  width: /*ШИРИНА КАРТИНКИ С ЛУПОЙ*/;
  height: /*высота КАРТИНКИ С ЛУПОЙ*/

  /* с помощью left и height спозиционировать лупу по центру картинки*/
}

.zoom:hover:after {
  display: block;
}

.zoom #pic1 {
  transition: all 0.5s ease-in;
}

.zoom #pic1:hover {
  transform: scale(1.5);
}

nikolokaputik80 · 11.11.2015, 11:20

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

есть только вот такая конструкция с фото в которой ничего менять нельзя

Код:

<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-1.jpg" /></a>
<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-2.jpg" /></a>
<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg" /></a>

привязаться можно только к class="zoom"

и таких ссылок на странице 10, у меня нет возможности добавить к каждой уникальный ид

из вашего примера (#pic1)

nikolokaputik80 · 11.11.2015, 12:30

сделал вот так, но сейчас у меня работает зумирование картинки, но
как мне привязать лупу?
что бы при наведении на картинку она не только зумировалась но и проявлялась иконка лупы!

вот код

Код HTML:



<style>

.zoom {
margin: auto;
overflow:hidden;
width: 180px;
height:120px;
}

.zoom img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}

.zoom img:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
}
  
</style>


<div class="zoom"><a href="#"><img width="180" height="120" src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-1.jpg" /></a></div>
<div class="zoom"><a href="#"><img width="180" height="120" src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-2.jpg" /></a></div>
<div class="zoom"><a href="#"><img width="180" height="120" src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg" /></a></div>

где мне в стилях нужно вставить ссылку на иконку лупы

background-image:url(images/watching_videos.png);

10.11.2015, 22:59	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	ну если ты ниче не можешь, значит ты ниче не можешь. Соболезную. Alar, верни репу!

10.11.2015, 23:08	#3
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	Вам здесь не нужен скрипт. Это всё делается на уровне CSS. Для тегов IMG внутри ссылок пропишите атрибут ID и задайте им уникальном значение для каждой картинки. Далее для увеличения и появления лупы пишите такой код CSS: Код: `.zoom:after { position: absolute; content: ''; display: none; background-image: url("ПУТЬ К КАРТИКЕ С ЛУПОЙ"); width: /ШИРИНА КАРТИНКИ С ЛУПОЙ/; height: /высота КАРТИНКИ С ЛУПОЙ/ /* с помощью left и height спозиционировать лупу по центру картинки*/ } .zoom:hover:after { display: block; } .zoom #pic1 { transition: all 0.5s ease-in; } .zoom #pic1:hover { transform: scale(1.5); }`

11.11.2015, 11:20	#4
nikolokaputik80 Пользователь Регистрация: 30.09.2015 Сообщений: 74	спасибо, за цсс - но похоже не то! в моем случае, я не могу прописать уникальный ид для каждой картинки есть только вот такая конструкция с фото в которой ничего менять нельзя Код: `<a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-1.jpg" /></a> <a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-2.jpg" /></a> <a href="#" class="zoom"><img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg" /></a>` привязаться можно только к class="zoom" и таких ссылок на странице 10, у меня нет возможности добавить к каждой уникальный ид из вашего примера (#pic1) Последний раз редактировалось Вадим Мошев; 11.11.2015 в 12:23.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Эффект плавного увеличения Элементов как Highslide	eagleoriginal	Компоненты Delphi	11	29.06.2012 20:26
Сбой увеличения изображения	MetisKot	HTML и CSS	1	25.12.2011 17:55
Эффект увеличения изображения	dacorp	JavaScript, Ajax	2	30.06.2011 15:00
операции увеличения в с++	JOFRIF	Помощь студентам	8	26.04.2008 20:25