Форум

Vladislav306907 · #1 (**permalink**) 18.01.2016, 14:53

Приветствую, подскажите плиз, как избавиться от следующего косяка.
На главной блок "Услуги" - http://vd-37.ru/
При наведении на блок, выезжает 2 прозрачные панельки. Хорошо, что выезжают, но не могу понять как сделать так, чтобы они выезжали из под бордера, а не над ним. На словах не ясно, но посмотрите пример и сразу станет понятно, что я имею в виду. Полюбому много кто с этим сталкивался, но я пока не догнал как обойти это

рони · #2 (**permalink**) 18.01.2016, 15:54

Vladislav306907,
может так?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.usl_block {
    width: 209px;
    height: 209px;
    border-radius: 50%;
    border: 11px solid #43aedf;
    display: inline-block;
    overflow: hidden;
    position: relative;
    cursor: pointer;

}
.usl_block > span {
    padding-top: 70px;
    position: absolute !important;
    visibility: hidden;
    left: 0;
    right: 0;
    z-index: 10;
    position: relative;
    font-family: "OpenSansBold";
    font-size: 20px;
    color:  transparent;
    line-height: 20px;
    text-align: center;
    font-weight:  bold;

}

.usl_block:hover > span{
  visibility: visible;
  color: #333;
  transition: all .8s  ease-in-out .6s;
}
.woo, .woo_1{
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0.5;
	position: absolute;
	top: -220px;
	border-radius: 50%;
	font-family: "OpenSansBold";
	font-size: 20px;
	color: #333;
	line-height: 1;
    margin: -11px;
    left: 11px;
    transition: all .6s ease-in-out;

}
.usl_block:hover .woo, .usl_block:hover .woo_1{
   top: 11px;
   transition-duration: .8s;
}
.woo_1 {

	top: 220px;

}
  </style>
</head>

<body>
<a href="#"><div class="usl_block"><div  class="woo"></div><span>Кратко об услуге:<br>цена<br>преимущества</span><div  class="woo_1"></div><img class="us_6" src="http://vd-37.ru/wp-content/themes/veter/img/us_6.png" alt="us_6"></div></a><p>Магазин-аптека</p>
</body>

</html>

Vladislav306907 · #3 (**permalink**) 18.01.2016, 17:39

Спасибо, я нашел решение, пропустил один z-index

Форум

Справочник

Discord чат

Курсы javascript