0

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;
   }
 }
bwa35
  • 13
  • 5
  • 1
    Do you have a cursor in your mobile to hover with? – Kudos Mar 09 '16 at 14:29
  • no i wasnt sure how to do this, at the minute its just a simple slide up and down like you would on any touch phone. Is there a way to do this? – bwa35 Mar 09 '16 at 14:33
  • Take a look at this post http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers – Kudos Mar 09 '16 at 14:40
  • Thanks, I have tried each solution on there but it doesnt seem to be working, I'm not too sure how to fit it in with my html and css for it to work properly without changing too much – bwa35 Mar 09 '16 at 15:02

0 Answers0