i've created div contains box, within box text , link. want when person hovers on box link, red line appears on bottom of box. @ moment i've managed this want red line width of grey box , 5 pixels in height.
#teamspeak_box { width: 159px; height: 43px; background: #212121; bottom: 82px; right: 76px; position: absolute; border-radius: 0px 0px 5px 5px; } #teamspeak_box_2 { width: 43px; height: 43px; background: #313131; bottom: 82px; right: 191px; position: absolute; border-radius: 0px 0px 0px 5px; } #teamspeak_text { color: white; bottom: 93px; right: 66px; position: absolute; } #teamspeak_image { bottom: 80px; right: 104px; position: absolute; } #teamspeak_image a:hover { background-color: #c62828; transition: 0.5s ease; }<div id="teamspeak_box"></div> <div id="teamspeak_box_2"> </div> <div id="teamspeak_text"> <p>teamspeak <p/> </div> <div id="teamspeak_image"> <a href="ts3server://craft412.serveminecraft.net:9987"> <img src="images/craft412 - box - teamspeak.png" alt="teamspeak"> </a> </div>
i find element positioning insane. try one
html
<a href="ts3server://craft412.serveminecraft.net:9987"> <div class="teamspeak-box"> <div class="teamspeak-icon"> <img src="http://filepic.ru/file/1436899103.png" alt=""> </div> <p>teamspeak</p> </div> </a> css
.teamspeak-box{ width: 159px; height: 43px; background: #212121; border-radius: 0px 0px 5px 5px; overflow: hidden; color: white; display: table; } .teamspeak-icon{ width: 43px; height: 43px; background: #313131; display: table-cell; transition: 0.5s ease; } .teamspeak-icon img{ width: 100%; } .teamspeak-box p{ display: table-cell; text-align: center; vertical-align: middle; } .teamspeak-box:hover .teamspeak-icon{ -webkit-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1); -moz-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1); box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1); } run code on jsfiddle
Comments
Post a Comment