Форум Сайтостроение Веб-строительство

Зафиксировать элементы CSS

ExVood
На сайте с 02.07.2013
Offline
39
ExVood
3954

Здравствуйте ув. спецы!

Решил сделать "Увеличение картинки при наведении на изображение".

Картинка увеличивается, однако рядом с ней, в блоке находится текст, который смещается влево когда картинка увеличивается. Не знаю как зафиксировать:

.myblock {
float: left;
width: 48%;
margin: 3px;
background: #2a2a2a;
border-radius: 4px;
font: 11px/14px Arial;
color: #FFFFF;
padding: 5px;
height:76px;
}

.myblock a {
color:#c7e85b;
}

.myblock img {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 130px;
border: 1px solid #FFFFF;
margin-right: 7px;
border-radius: 5px;
float:left;
}

.myblock img:hover {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
width: 280px;
margin: -40px;
box-shadow: 0 10px 15px rgba(0,0,0,0.5);
z-index: 200;
position: absolute;
}
S
На сайте с 05.04.2013
Offline
19
SVatlin
#1

Наверно вам надо картинку ещё в отдельный див оборачивать внутри myblock

eis
На сайте с 18.10.2008
Offline
473
eis
#2

Текст оберните в <span> (если у текста нету отдельной обертки), задайте класс и классу назначьте правило position: absolute;

- Здесь я покупаю вечные ссылки на свои сайты! (https://backlinkator.com) - сотни ссылок за копейки
ExVood
На сайте с 02.07.2013
Offline
39
ExVood
#3
eis:
Текст оберните в <span> (если у текста нету отдельной обертки), задайте класс и классу назначьте правило position: absolute;

У меня тут и заголовок используется... Можно ли это как-то сделать не прибегая к созданию кучи div'oв?

<div class="myblock">
[link][show_image]<img src="{image}" title="{anchor}" alt="{anchor}" />[/show_image][/link]
<h2>{link}</h2>
{full-story}...
</div>
S
На сайте с 05.04.2013
Offline
19
SVatlin
#4

Вот так попробуйте:


<div class="myblock">
<div style="float: left; width: 130px;">
[link][show_image]<img src="{image}" title="{anchor}" alt="{anchor}" />[/show_image][/link]
</div>
<h2>{link}</h2>
{full-story}...
</div>
ExVood
На сайте с 02.07.2013
Offline
39
ExVood
#5
SVatlin:
Вот так попробуйте: 

<div class="myblock">

<div style="float: left;">

[link][show_image]<img src="{image}" title="{anchor}" alt="{anchor}" />[/show_image][/link]

</div>

<h2>{link}</h2>

{full-story}...

</div>

float:left; прописан в myblick img, нужно что бы текст и заголовок, которые находятся справа от картинки не смещались при наведении на неё...

S
На сайте с 05.04.2013
Offline
19
SVatlin
#6

ExVood, попробуйте код, который я дал выше (там ещё добавил ширину дива), а float: left; в myblock img можно убрать.

eis
На сайте с 18.10.2008
Offline
473
eis
#7

ExVood, ну так у Вас {link} в h2 уже, ему просто и класс добавьте как я писал.

ExVood
На сайте с 02.07.2013
Offline
39
ExVood
#8
eis:
ExVood, ну так у Вас {link} в h2 уже, ему просто и класс добавьте как я писал.

Пробовал и заголовок встал на катинку, а не рядом с ней

Q8
На сайте с 02.08.2012
Offline
31
q8888
#9

<div class="myblock">

[link][show_image]<img src="{image}" title="{anchor}" alt="{anchor}" />[/show_image][/link]

<div style="margin-left:140px;">

<h2>{link}</h2>

{full-story}...

</div>

</div>

так не пойдет?

ExVood
На сайте с 02.07.2013
Offline
39
ExVood
#10
q8888:
<div class="myblock">
[link][show_image]<img src="{image}" title="{anchor}" alt="{anchor}" />[/show_image][/link]
<div style="margin-left:140px;">
<h2>{link}</h2>
{full-story}...
</div>
</div>

так не пойдет?

Прошу прощения за столь долгий ответ!

Да, так подошло. Правда для этого пришлось убирать

transition: all 0.3s ease-out;
, т.к. смещение происходило когда картинка возвращалась на свое прежнее место, а при приближении <div style="margin-left:140px;"> срабатывает нормально.

Спасибо!

Помогите пожалуйста разобраться с Сделать в абзаце отступ Размер <br> ?

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий