.radius {
display: block;
width: 50px; /* ширина в два раза меньше высоты, иначе получится полуовал */
height: 100px;
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
background: linear-gradient( rgb(101,220,167) 0%, rgb(53,112,94) 100%)
}$(".myDiv").hover(function(){
$(this).addClass('animated имя_анимации');
});
$(".myDiv").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",function(){
$(this).removeClass('animated имя_анимации'и);
});<div id="slider">Бокс для вашего слайдера
</div>
<div id="content">Бокс с контентом</div>*{
margin:0;
}
#slider{
display:block;
width: 100%;
height: 500px;
background:gray;
}
#content{
display:block;
width: 500px;
height: 300px;
background: rgba(0,0,0,0.3);
z-index:999;
position: absolute;
top: 100px;
left: 50%;
margin-left: -250px;
}
<div id="block">
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel erat eu risus pharetra lacinia. Morbi consectetur urna vitae ornare fringilla.
</p>
</div>#block{
background:rgba(0,0,0,0.5); /* 0.5 – 50% непрозрачности */
}
.text {
color:#fff;
}<h1 id="switch" onmouseover="switchBg()">Поменять цвет</h1>
<script>
function switchBg() {
document.body.style.backgroundImage ="url('http://preview.cutcaster.com/cutcaster-photo-100439100-True-Carbon-Fiber.jpg')";
}
</script>#switch{
margin-bottom: 50px;
border:1px solid #fff;
background:#ccc;
}