Dear pros! Please help in the implementation of the following effect.

Fragment

I could do everything except the working buttons "magnifying glass" and "link".

My code snippet:

$('.projects-post').mouseenter(function() { $(this).find('.projects-post__arrow>img').attr('src', '../img/projects/arrow-activ.png'); $(this).find('.projects-post-img').css('background-color', '#362f2d'); $(this).find('.projects-post-text').css('background-color', '#362f2d'); }); $('.projects-post').mouseleave(function() { $(this).find('.projects-post__arrow>img').attr('src', '../img/projects/arrow.png'); $(this).find('.projects-post-img').css('background-color', '#fbfaf8'); $(this).find('.projects-post-text').css('background-color', '#fbfaf8'); }); 
 .projects-post { background-color: #fbfaf8; } .projects-post-img { position: relative; text-align: center; } .projects-post-img a { display: block; position: relative; } .projects-post-img a:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; } .projects-post-img a:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("../img/projects/lupa.png") center no-repeat; opacity: 0; z-index: 10; } .projects-post-img a:hover:before, .projects-post-img a:hover:after { opacity: 1; } .projects-post__arrow { position: absolute; bottom: 3px; left: 30px; } .projects-post-text { padding-top: 20px; padding-bottom: 15px; } .projects-post-text__title { color: #c7b299; font-family: 'Raleway'; font-size: 18px; font-weight: 500; } .projects-post-text__subtitle { color: #d1d1d1; font-family: 'Montserrat'; font-size: 14px; font-weight: 300; line-height: 20px; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-4 projects-post webdesign justify-content-center mb-4"> <div class="projects-post-img text-center p-2 w-100"> <a href="img/projects/photo1.jpg"> <img class="w-100 h-100" src="img/projects/photo-1.jpg" alt="" /> </a> <div class="projects-post__arrow"> <img src="img/projects/arrow.png" alt=""> </div> </div> <div class="projects-post-text pl-4"> <h5 class="projects-post-text__title">Claritas Etiam Processus</h5> <small class="projects-post-text__subtitle">Photography, Nature</small> </div> </div> <div class="col-4 projects-post webdesign justify-content-center mb-4"> <div class="projects-post-img text-center p-2 w-100"> <a href="img/projects/photo2.jpg"> <img class="w-100 h-100" src="img/projects/photo-2.jpg" alt="" /> </a> <div class="projects-post__arrow"> <img src="img/projects/arrow.png" alt=""> </div> </div> <div class="projects-post-text pl-4"> <h5 class="projects-post-text__title">Quam Nutamus Farum</h5> <small class="projects-post-text__subtitle">Graphic Design, Mock-Up</small> </div> </div> <div class="col-4 projects-post mobile justify-content-center mb-4"> <div class="projects-post-img text-center p-2 w-100"> <a href="img/projects/photo3.jpg"> <img class="w-100 h-100" src="img/projects/photo-3.jpg" alt=""> </a> <div class="projects-post__arrow"> <img src="img/projects/arrow.png" alt=""> </div> </div> <div class="projects-post-text pl-4"> <h5 class="projects-post-text__title">Usus Legentis Videntur</h5> <small class="projects-post-text__subtitle">Photography, Holiday</small> </div> </div>

Thank you in advance!

  • I understand you need to use CSS3 Transitions stackoverflow.com/questions/15907079/… - Alexander Chernin
  • I think this is not exactly what I wanted. I need to realize the following: when you hover over the picture, it changes colors and the like, but the most important thing is to darken the picture and on it appear two icons "share link" and "magnifier". My question is how to fasten links to these icons (for example, a magnifying glass will open a large image). - Konstantin
  • Either I didn’t catch up with something .. - Konstantin
  • Make these links invisible, and then transient when you hover, show them - Alexander Chernin

1 answer 1

Not by your example did but showed the mechanism how this is implemented

Create a block that contains everything that needs to be hidden and displays it at the hover event.

 * { margin: 0; padding: 0; } .items { display: inline-block; text-align: center; position: relative; width: 220px; height: 220px; overflow: hidden; } .post_hidden { text-align: left; position: absolute; bottom: 0; transform: translateY(100%); padding: 20px; background: #222; transition: 0.34s linear; } .post_hidden h3 { font-size: 18px; color: #fbfbfb; } .post_hidden p { font-size: 12px; color: #fbfbfb; } .post_hidden p { width: 200px; } .preview { position: absolute; top: 0; left: 0; bottom: 0; } .wrapper { position: relative; width: 220px; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: 0.34s linear; } .item { height: 120px; line-height: 140px; } .item a { margin: 0 10px; color: #fbfbfb; } .items:hover .wrapper { opacity: 1; visibility: visible; } .items:hover .post_hidden { transform: translateY(0); } 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="items"> <div class="preview"> <img src="https://buyoncdn.ru/product/1890406454/product_mainpage/1537834/fly-ezzy-trendy-3-temno-seryy.jpg" alt="" width="220px"> </div> <div class="wrapper"> <div class="item"> <a href=""><i class="fa fa-chain-broken" aria-hidden="true"></i></a> <a href=""><i class="fa fa-search" aria-hidden="true"></i></a> </div> <div class="post_hidden"> <h3>post name</h3> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet, eaque?</p> </div> </div> </div>

  • This is exactly what I need! I'll figure it out now to put on my code. Low bow to you! - Konstantin