Как вывести hover эффекты css для изображения?

Svetlana1106 · 24 липня 2016

Здравствуйте!

Буду благодарна за совет:

на сайте через html вывела в в одну строку 3 разных картинки. Нужно для каждой из них прописать css с эффектом затемнения картинки или вывод белой рамки при наведении мышкой на одну из картинок.

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

<html>

<head>

img:hover {

opacity:0.8;

-moz-opacity:0.8;

filter: alpha(opacity=80) black;

-khtml-opacity: 0.8;

}

</style>

</head>

Змінено 24 липня 2016 користувачем Svetlana1106

PeterStudio · 24 липня 2016

Всё очень просто

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="view effect">  
<img src=""/>
<div class="mask"></div>  
</div>    
<div class="view effect">  
<img src=""/>
<div class="mask"></div>  
</div>    
<div class="view effect">  
<img src=""/>
<div class="mask"></div>  
</div>      
</body>
</html

CSS:

.view {
   width: 100px;
   height: 100px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}

.view .mask, .view .content {
   width: 100px;
   height: 100px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view img {
   display: inline-block;
   position: relative;
}

.view a.info {
   background:url(../img/link.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:20px;
   height:20px;
}


.effect .mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}

.effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}

Вхід

Как вывести hover эффекты css для изображения?

Recommended Posts

Svetlana1106

Надіслати

Поділитися на інших сайтах

PeterStudio

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Ваші замовлення

ocStore

Шаблони

OpenCart.Pro

Important Information