ZorNet.Ru — сайт для вебмастера » HTML и CSS » Рекламный блок "место свободно" с эффектом

Рекламный блок "место свободно" с эффектом

Рекламный блок "место свободно" с эффектом
С эффектор полного разворота на 360 градусов баннера при наведении клика. Где может быть как картинка или надпись под установку в блок. А так это безусловно небольшой хак, который больше внимание привлекает. Где установка проста и все происходит на стилях. Не исключаю, что это элемент можно задействовать в совершенно другом месте.

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

HTML

Код
<div class="zornet_ru_tensam">  
<div style="cursor:pointer" class="dermugtuman"><img title="Место свободно" src="http://zornet.ru/zornet_ru4/50511465.gif"></div>
<br><br>
<div style="cursor:pointer" class="dermugtuman"><img title="Место свободно" src="http://zornet.ru/Ajaxoskrip/3835891.gif"></div>
<br><br>
<div style="cursor:pointer" class="dermugtuman"><img title="Место свободно" src=""></div>
<br><br>
<div style="cursor:pointer" class="dermugtuman"><img title="Место свободно" src=""></div>
</div>

CSS

Код
.dermugtuman {display:inline;margin-right:10px;color: #f9fbfd;}  
.dermugtuman:hover {display:inline;}  
.zornet_ru_tensam {bottom:0;margin-top:0px; margin-right:0px;}  
.dermugtuman img {width:88px;height:31px;background:url(http://zornet.ru/Aben/ABGDA/0NyAUcjwSaqMO-vri-nXrQ.png);-webkit-transition: all 400ms;-moz-transition: all 400ms;-o-transition: all 400ms;transition: all 400ms;position:relative;bottom:0px;right:0px;}  
.dermugtuman img:hover {transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);position:relative;bottom:0px;right:0px;}
07 Декабря 2017 Просмотров: 1218 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar