Перейти к содержанию
Svetlana1106

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

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

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

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

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