Всплывающий блок при наведении мыши 2

версия с навигационной панелью по якорям

by Denis Tverdokhlebov

HTML

<div class="box-crew">

        <img src="" alt="" />
        <span>
        	<div class="bulets_1">
        		<ul>
        			<a href="#link_1" class="scrollto" title="Контактная информация"><li><img src="/images/bullet.png"></li></a>
        			<a href="#link_2" class="scrollto" title="Семейное положение"><li><img src="/images/bullet.png"></li></a>
        			<a href="#link_3" class="scrollto" title="Занятость"><li><img src="/images/bullet.png"></li></a>
        			<a href="#link_4" class="scrollto" title="Кредитная иcтория, заявки"><li><img src="/images/bullet.png"></li></a>
        			<a href="#link_5" class="scrollto" title="Прочее"><li><img src="/images/bullet.png"></li></a>
        			<a href="#link_6" class="scrollto" title="Договоры"><li><img src="/images/bullet.png"></li></a>
        		</ul>
        	</div>
        </span>
    
</div>

CSS

.bulets_1 {
    background: none repeat scroll 0 0 #000000;
    border-radius: 0 0 8px 8px;
    font-size: 35px;
    height: 50px;
    margin: 0;
    opacity: 0.1;
    padding: 0;
    display:block;
}

.bulets_1:hover {
    opacity: 0.70;
}

.bulets_1 a:hover{
    color: #62000F;
}

.bulets_1 a{
    color: #CF0036;
}

.bulets_1 li{
    list-style: none;
    display: inline;
}

.bulets_1 ul {
    margin: 9px 39px;
    padding: 0;
}

.bulets_1 img{
/*    width: 35px;
    height: 35px;*/
    overflow:hidden;   
}

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,italic300);
*, :before, :after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}


.button_bul_slide{
    background:yellow;
    width:50px;
    height:50px;
    margin:0 auto;
    padding:0;
    -webkit-transition: background 1000s ease;
    -moz-transition: background 1000s ease;
    transition: background 1000s ease;
}

.button_bul_slide:hover{
    opacity:0;
}

.box-crew{
height:50px;
position:relative;
width:280px;
overflow:hidden;
position: fixed;
right: 0;
top: 0;
}
 
.box-crew span{
background-color:rgba(0, 0, 0, 0.4);
top:-100px;
transition-duration:0.6s;
padding:10px 0;
position:absolute;
text-align:center;
color:#fff;
font-size:12px;
font-weight:bold;
line-height:16px;
margin:0;
display:block;
width:100%;
}
 
div.box-crew:hover span{
top:0;
}