There is a gallery code on css3 for a one-page site. Three pictures in three rows. When you click the picture increases on top of the other images. Everything works well, but. I need that when I hover over the picture it is covered with a blue translucent background with the text, and afterwards, when pressed, it unfolded. But this is not how I come to realize. PS It seems to be properly designed.

/*Π£Π±ΠΈΡ€Π°Π΅ΠΌ Ρ€Π°ΠΌΠΊΡƒ фокуса*/ :focus { outline: none; } /*Основной Π±Π»ΠΎΠΊ*/ .gallery { width: 980px; margin: 0 auto; position: relative; } /*ссылки-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹*/ .gallery a { margin: 0; padding: 10px; display: inline-block; height: 130px; position: relative; width: 300px; } /*ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ ссылок*/ .gallery a img { margin: 0; padding: 10px; cursor: pointer; display: block; left: 0px; width: 300px; height: 130px; position: absolute; top: 10px; z-index: 1; } /*ссылка ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ фокус ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° разворачиваСтся*/ .gallery a:focus img { border: none; margin: 0; padding: 0; border: 2px solid rgb(153, 153, 153); border-radius: 3px; cursor: default; height: 300%; width: 300%; position: absolute; z-index: 25; transition-duration: 0.7s; } /*ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ€Π°Π·Π²Ρ‘Ρ€Π½ΡƒΡ‚ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ*/ .gallery a:focus:nth-child(3n+1) img { left: 0; top: -145px; } .gallery a:focus:nth-child(3n+2) img { left: -315px; top: -145px; } .gallery a:focus:nth-child(3n+3) img { left: -640px; top: -145px; } .gallery a:focus:nth-child(-n+3) img { top: 10px; } .gallery a:focus:nth-child(n+7) img { top: -300px; } .gallery a:focus:nth-child(n+10) img { top: -300px; } /*ΠΊΠ½ΠΎΠΏΠΊΠ° закрытия ΠΈ сброса фокуса*/ .closed { background-color: rgb(250, 75, 21); position: absolute; top: -5px; right: 20px; display: none; width: 30px; height: 30px; cursor: pointer; z-index: 30; } /*тСкст Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ закрытия*/ .closed p { margin: 10px 8px; font-size: 10px; color: rgb(255, 255, 255); position: absolute; } /*ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎΠ²Π΅Ρ€Ρ… Ρ€Π°Π·Π²Ρ‘Ρ€Π½ΡƒΡ‚ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ для закрытия*/ .closed-layer { display: none; position: absolute; top: 100px; left: 100px; width: 800px; height: 400px; background: transparent; z-index: 30; } /*Π±Π»ΠΎΠΊΠΈ закрытия ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ фокус*/ a:focus~.closed, a:focus~.closed-layer { display: block; transition-duration: 4s; } 
 <div id="bottom"> <div class="container" id="container"> <div class="gallery"> <a tabindex="1"> <img src="image/nor1.jpg"> </a> <a tabindex="1"> <img src="image/nor2.jpg"> </a> <a tabindex="1"> <img src="image/nor3.jpg"> </a> <a tabindex="1"> <img src="image/nor4.jpg"> </a> <a tabindex="1"> <img src="image/nor5.jpg"> </a> <a tabindex="1"> <img src="image/nor6.jpg"> </a> <a tabindex="1"> <img src="image/nor7.jpg"> </a> <a tabindex="1"> <img src="image/nor8.jpg"> </a> <a tabindex="1"> <img src="image/nor9.jpg"> </a> <span class="closed"><p><i class="icon-cancel"></i></p></span> <span class="closed-layer"></span> </div> </div> </div>

    2 answers 2

    The main goal is to create or create in each block with a picture ( tag A ), with position: relative; overlapping elements ( translucent blue background and text element ) with position: absolute , and stretch them over the entire tag A. You can create a text element in the block itself with a blue translucent background, but in this case, you will have to put up with the effect of translucency on the text. Initially, overlapping elements should be hidden, and when the hover event is triggered on the A tag , they should be displayed

    Example implementation in pure CSS ( Live example ):

     /* Бсылки ΠΈ ΠΎΠ±Ρ‘Ρ€Ρ‚ΠΊΠ° для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ (Ρ‚Π΅Π³ A) */ .img-link { display: inline-block; position: relative; width: 300px; height: 130px; } /* ΠžΠ±Ρ‰ΠΈΠ΅ стили для ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… элСмСнтов */ .cover-bg, .cover-title { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π±Π»ΠΎΠΊ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ */ .img-link:hover .cover-bg, .img-link:hover .cover-title{ display: block; } /* ΠŸΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ Ρ„ΠΎΠ½ */ .cover-bg { background: #77c4f0; -khtml-opacity: .6; -moz-opacity: .6; opacity: .6; } /* ΠŸΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ тСкст */ .cover-title { color: #000; font-size: 120%; text-align: center; text-transform: uppercase; }

    Well, with the help of JS , you can insert all the necessary elements of the overlap, when you hover, and priplesti here the necessary effects

    • It turned out to be so simple that I feel ashamed. But I spent half a day above it .. Thank you so much. - Ivan

    As an example https://jsfiddle.net/apvdctg3/

    continue to draw the text, change the color overlay