https://freehtml5.co/preview/?item=closest-free-html5-bootstrap-template when you hover over the picture, a white block appears with text and indents, how do I do the same in which direction to move? Thank you very much in advance.

    1 answer 1

    * { padding: 0; margin: 0; box-sizing: border-box; } .b-picture { position: relative; max-width: 300px; margin: 10px auto; } .b-picture img { max-width: 100%; display: block; } .b-picture:before { content: ''; position: absolute; top: 5%; left: 5%; bottom: 5%; right: 5%; background: rgba(255, 255, 255, 0.8); opacity: 0; transition: 0.3s; } .b-picture-content { opacity: 0; position: absolute; top: 0; left: 0; display: table; width: 100%; height: 300px; text-align: center; transition: 0.3s; } .b-picture-content-item { display: table-cell; vertical-align: middle; padding: 8%; } .b-picture:hover:before, .b-picture:hover .b-picture-content { opacity: 1; } 
     <div class="b-picture"> <img src="http://placehold.it/300x300"> <div class="b-picture-content"> <div class="b-picture-content-item"> <h3>Title</h3> <p>Please support this website by adding us to your whitelist in your ad blocker. </p> </div> </div> </div>