Good day. I hope for a hint, because I can not understand what the problem is. Essence: using one of the hover effects from this source: https://miketricking.imtqy.com/dist/

The problem is that, in adaptive mode, when the pictures become 2 or 1 column, the hover effect disappears.

The site where the problem is - http://devkeyz.crabdance.com , section "Our work"

html repair platform

Far, far beyond the verbal mountains in the country, vowels and consonants live fish texts.

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="hovereffect"> <img class="img-responsive" src="img/work3.png" alt=""> <div class="overlay"> <span>Установка гидроцилинрда</span> <p> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. </p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="hovereffect"> <img class="img-responsive" src="img/work4.png" alt=""> <div class="overlay"> <span>Установка системы BDF</span> <p> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. </p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="hovereffect"> <img class="img-responsive" src="img/work1.png" alt=""> <div class="overlay"> <span>Ремонт платформы</span> <p> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. </p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="hovereffect"> <img class="img-responsive" src="img/work2.png" alt=""> <div class="overlay"> <span>Ремонт платформы</span> <p> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. </p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="hovereffect"> <img class="img-responsive" src="img/work3.png" alt=""> <div class="overlay"> <span>Ремонт платформы</span> <p> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. </p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item"> <div class="hovereffect"> <img class="img-responsive" src="img/work4.png" alt=""> <div class="overlay"> <span>Ремонт платформы</span> <p> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. </p> </div> </div> </div>

SASS

 .portfolio-item margin: 15px 0px .hovereffect width: 100% height: auto overflow: hidden position: relative text-align: center cursor: default float: left .overlay position: absolute overflow: hidden width: 80% height: 80% left: 10% top: 10% border-bottom: 1px solid #FFF border-top: 1px solid #FFF -webkit-transition: opacity 0.35s, -webkit-transform 0.35s transition: opacity 0.35s, transform 0.35s -webkit-transform: scale(0,1) -ms-transform: scale(0,1) transform: scale(0,1) &:hover .overlay opacity: 1 filter: alpha(opacity=100) -webkit-transform: scale(1) -ms-transform: scale(1) transform: scale(1) img display: block position: relative -webkit-transition: all 0.35s transition: all 0.35s &:hover img filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter') filter: brightness(0.3) -webkit-filter: brightness(0.3) transition: 0.3s span text-transform: uppercase font-weight: bold text-align: center position: relative font-size: 17px background-color: transparent color: #FFF padding: 1em 0 opacity: 0 filter: alpha(opacity=0) -webkit-transition: opacity 0.35s, -webkit-transform 0.35s transition: opacity 0.35s, transform 0.35s -webkit-transform: translate3d(0,-100%,0) transform: translate3d(0,-100%,0) p color: #FFF opacity: 0 filter: alpha(opacity=0) -webkit-transition: opacity 0.35s, -webkit-transform 0.35s transition: opacity 0.35s, transform 0.35s -webkit-transform: translate3d(0,100%,0) transform: translate3d(0,100%,0) &:hover p, :hover span opacity: 1 filter: alpha(opacity=100) -webkit-transform: translate3d(0,0,0) transform: translate3d(0,0,0)

    2 answers 2

    1. The record format <img></img> is not allowed. Use <img /> or just <img>

    2. To find errors in html use html-validator

    3. Use the F12 Developer Toolbar. Use the picker Ctrl + Shift + C tool to search for overlapping elements. In the picture you can see that I set the background for the “Bodybuilding” block and it covers the elements of the portfolio above, so the guidance doesn’t work on them.

    4. Do not create a lot of unnecessary DOM-enclosures, you will speed up the process of rendering the page. Blocks with a width of 12 columns can simply be taken out of the row (body fabrication)

    overlapping elements

    • one
      Thanks, delivered in a separate .row block with text, now hover works. Please tell me another question. When I test in Chrome, when I choose to display as on a mobile device, a small horizontal scroll appears, it feels like some element creates padding and sticks out beyond the limits of the bootstrap grid. I do not practice the layout, my conditionally speaking pilot project, I made a familiar reference on my knee for 24 hours, I painted it myself, I folded it myself, now I’m trying to identify the bugs while learning new things. Tags will definitely correct, or rather, they have already been fixed on the local. - Devkeyz
    • There can be many reasons for a horizontal scroll to appear. First, make sure that there is no col without the parent row . I also advise you to use a pointer , click it, and drive them over suspicious elements of the page - it will show the size of each element in px. You can also write a small jquery script that will go through all the elements on the page and check that their width does not exceed the width of the window. I think you can do it yourself without any problems 😊 - Lukas Pierce
    • one
      Thanks again for the tips and tricks. My <nav> contained 'row', but 'container' was missing for it. Similarly, something where there was no 'row' for 'col' and did not stand at the bottom of the footer 'class = "img-responsive" "near the logo. - Devkeyz

    no opening tag <i>

     <li><a href="#services">Услуги</i></a></li>

    the <img> tag does not need a closing tag

     <a href="#"><img src="/img/zernovoz.png"></img></a>
    • I already drove it through w3 and corrected it on LAN, but this is not the question, I see errors in the code, I dropped another piece of code, the block “Our work”, and when resizing, when 2 or 1 picture is in a row, the hover is not it works for some reason. - Devkeyz
    • Wrap the body in a separate class row and it will work - Dumb