I have a project section on my website where a description appears over an image when the mouse hovers over it however when I view the images in mobile view their is no transition the text just stays over the image and doesn't fit very well, is there any way to fix this or create a button that can only be seen in mobile view that can be placed under the image where if its clicked it shows the description over the image or underneath it but then once it is in desktop view it goes back to being text hovered over an image? is this possible? Thanks
html:
<div class="row">
<div class="project-boxes">
<div class="six columns">
<a href="#">
<article class="caption">
<img class="caption__media1" src="assets/images/project1.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">title</h1>
<p class="caption__overlay__content">iuohkhkhkh</p>
</div>
</article>
</a>
</div>
<div class="six columns">
<a href="#">
<article class="caption">
<img class="caption__media2" src="assets/images/project3.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">title</h1>
<p class="caption__overlay__content">ukhkjhkjhkj</p>
</div>
</article>
</a>
</div>
</div>
</div>
css:
.project-boxes{
display: inline-block;
max-width: 100%;
margin: 0 auto;
margin-bottom:70px;
margin-left: 3%;
padding:10px;
}
@media(max-width:600px){
.project-boxes{
margin-left:10%;
padding:10px;
}
}
.caption {
position: relative;
overflow: hidden;
}
@media(max-width:600px){
.caption{
position: relative;
overflow: hidden;
}
}
.caption__media1 {
width: 400px;
height: 300px;
margin: 0 auto;
}
@media(max-width:1000px){
.caption__media1{
width:100%;
height: auto;
margin: 0 auto;
}
}
.caption__media2 {
width: 400px;
height: 300px;
margin: 0 auto;
}
@media(max-width:1000px){
.caption__media2{
width:100%;
height: auto;
margin: 0 auto;
}
}
.caption__media3 {
margin: 0 auto;
width: 400px;
height: 300px;
}
@media(max-width:1000px){
.caption__media3{
width:100%;
height: auto;
margin: 0 auto;
}
}
.caption__media4 {
width: 400px;
height: 300px;
margin: 0 auto;
}
@media(max-width:1000px){
.caption__media4{
width:100%;
height: auto;
margin: 0 auto;
}
}
.caption__overlay {
margin: 0 auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
transform: translateY(100%);
transition: transform .35s ease-out;
background:black;
}
.caption:hover .caption__overlay {
transform: translateY(0);
}
.caption__overlay__title{
font-family: 'Playfair Display', serif;
font-size: 40px;
font-weight:400;
padding: 0;
text-align:center;
}
@media(max-width:1000px){
.caption__overlay__title{
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: 20px;
}
}
.caption__overlay__content{
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 15px;
letter-spacing:1px;
}
@media(max-width:1000px){
.caption__overlay__content{
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 12px;
}
}