I have a web object with images. Can someone please tell me what should i do to turn my images into buttons? And is there a way text hover effect can be used on image as well.? So when i hover either on image button or text, the chapter name should come up.
HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>image button</title>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="btn1" class="background">
<p align="center">Chapter 1<br>Topic Name</p>
</div>
<div id="btn2" class="background">
<p align="center">Chapter 2<br>Topic Name</p>
</div>
<div id="btn3" class="background">
<p align="center">Chapter 3<br>Topic Name</p>
</div>
<div id="btn4" class="background">
<p align="center">Chapter 4<br>Topic Name</p>
</div>
<div id="btn5" class="background">
<p align="center">Chapter 5<br>Topic Name</p>
</div>
<div id="btn6" class="backgroundrow2">
<p align="center">Chapter 6<br>Topic Name</p>
</div>
<div id="btn7" class="backgroundrow2">
<p align="center">Chapter 7<br>Topic Name</p>
</div>
<div id="btn8" class="backgroundrow2">
<p align="center">Chapter 8<br>Topic Name</p>
</div>
<div id="btn9" class="backgroundrow2">
<p align="center">Chapter 9<br>Topic Name</p>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
html, body{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#container{
width: 1280px;
height: 720px;
background-color: rgba(201, 193, 184, 0.0);
overflow: hidden;
clip: rect(0px, 1280px, 720px, 0px);
}
.background {
margin-top: 100px;
margin-left: 65px;
margin-bottom: -30px;
width: 174px;
height: 215px;
display: inline-block;
overflow: hidden;
vertical-align: middle;
box-shadow: 5px 5px 5px #888888;
}
.backgroundrow2{
margin-top: 100px;
margin-left: 185px;
margin-right: -120px;
margin-bottom: -30px;
width: 174px;
height: 215px;
display: inline-block;
overflow: hidden;
vertical-align: middle;
box-shadow: 5px 5px 5px #888888;
}
p {
position: relative;
height: 43%;
top: 25%;
background: rgba(84, 83, 74, 1);
color: #fff;
padding-top: 0.1rem;
padding-left: 1.5rem;
padding-right: 1.8rem;
line-height: 1.6;
margin: 0px;
transform: translateY(140%);
-webkit-transition: .65s ease-in-out;
transition: .65s ease-in-out;
}
p:hover {
top: 0;
}
p:before {
position: absolute;
margin: 0 auto;
left: 42.5%;
top: -0.9rem;
content: "";
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-bottom: 1rem solid rgba(84, 83, 74, 1);
}
#btn1{
background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
background-size: 174px 215px;
}
#btn2{
background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
background-size: 174px 215px;
}
#btn3{
background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
background-size: 174px 215px;
}
#btn4{
background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
background-size: 174px 215px;
}
#btn5{
background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
background-size: 174px 215px;
}
#btn6{
background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
background-size: 174px 215px;
}
#btn7{
background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
background-size: 174px 215px;
}
#btn8{
background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
background-size: 174px 215px;
}
#btn9{
background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
background-size: 174px 215px;
}
Change from:
to links:
You can apply the
:hoverto the background class...See fiddle: https://jsfiddle.net/nm8bg4ee/2/