Эффекты при наведении курсора

Демо:

Заголовок

Подробнее
о книге

Краткое описание

Скачать книгу

Описание

Для различных эффектов при наведении курсора мыши часто используются свойства CSS3. Их полноценно поддерживают только современные браузеры. Приведённый выше эффект не поддерживается в InternetExplorer. Поэтому в таких случаях желательно предусмотреть простую кнопку, например, внизу.

Скачать исходники этого примера:

Скачать исходник

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Эффекты при наведении курсора</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="css/ie7.css">
    <![endif]-->
</head>
<body>

<div class="metka">
<h3 class="meth3">Заголовок</h3>
<a href="" class="meta">
<span  class="meta1">Подробнее</span>
<br>
<span  class="meta2">о книге</span>
</a>
<p class="metp">Краткое описание</p>
</div>

<a href="" class="cwet">Скачать книгу</a>

</body>
</html>

CSS:

html,body,div,h3,p,a,img{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1em;
    background: #F1F1F1;
}

a.cwet{
    display: block;
    width: 160px;
    height: 40px;
    border-radius: 4px;
    background: #00E00F;
    margin: 0 auto;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    line-height: 1.8em;
    text-align: center;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
a.cwet:hover{
    background: #00C20D;
}


.metka{
    width: 160px;
    height: 220px;
    margin: 20px auto;
    overflow: hidden;
    background: #ADC0FF;
    border: solid 1px #DEDEDE;
    border-radius: 4px;
    background-image: url(../img/kniga.jpg);
    cursor: pointer;
}

h3.meth3{
    position: relative;
    padding: 35px 15px 20px;
    top: -60px;
    font-size: 1.4em;
    color: #fff;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

a.meta{
    position: relative;
    font-size: 1em;
    line-height: .7em;
    font-weight: bold;
    color: #fff;
    padding: 10px 30px 10px;
    display:block;
}

.meta1{
    left: -130px;
    position: relative;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    display:block;
}

.meta2{
    left: 140px;
    position: relative;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    display:block;
}

p.metp{
    position: relative;
    top: 100px;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.3em;
    color: #fff;
    padding: 10px 30px 10px;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

.metka:hover{
    background-image: url(../img/kniga2.jpg);
}

.metka:hover h3.meth3{
    -webkit-transform: translate(0,60px);
    -moz-transform: translate(0,60px);
    -o-transform: translate(0,60px);
}

.metka:hover .meta1{
    -webkit-transform: translate(130px,0);
    -moz-transform: translate(130px,0);
    -o-transform: translate(130px,0);
}

.metka:hover .meta2{
    -webkit-transform: translate(-130px,0);
    -moz-transform: translate(-130px,0);
    -o-transform: translate(-130px,0);
}

a.meta:hover{
    text-decoration: none;
}

.metka:hover p.metp{
    -webkit-transform: translate(0,-100px);
    -moz-transform: translate(0,-100px);
    -o-transform: translate(0,-100px);
}

©   2015   00a.ru