Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


Svetlana1106
 Поделиться

Рекомендованные сообщения

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

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

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

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

 

<html>

<head>

 <title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <style type="text/css">

  img:hover {

  opacity:0.8;

  -moz-opacity:0.8;

  filter: alpha(opacity=80) black;

  -khtml-opacity: 0.8;

  }

 </style>

</head>

<body bgcolor="#FFFFFF">

<div style="width:270px;height:228px;background:#000;">

  <img src= картинка/>   

Изменено пользователем Svetlana1106
Ссылка на комментарий
Поделиться на других сайтах


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

 

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);
}
  • +1 1
Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.