Показать сообщение отдельно
  #2 (permalink)  
Старый 18.01.2016, 15:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

css hover для border-radius
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>

Последний раз редактировалось рони, 18.01.2016 в 15:56.
Ответить с цитированием