Add border over an image and text

Navigation
3

How do I override a border over an image and text, leaving a border for the image as the attached image:

    
asked by anonymous 07.11.2017 / 21:07

2 answers

2

One way to construct this border is by creating a pseudo-element in the element where the content is inserted, with position absolute and dimensions in % slightly lower than elemento-pai : 

.box::after{
   content: '';
   display: block;
   width: 93%;
   height: 93%;
   border: 1px solid #ddd;
   position: absolute;
   top: 3%; left: 3%;
}

Test: 

.box{
   display: block; width: 200px; text-align: center;
   position: relative; padding-bottom: 50px; float: left; margin: 0 5px;
}

.box::after{
   content: '';
   display: block;
   width: 93%;
   height: 93%;
   border: 1px solid #ddd;
   position: absolute;
   top: 3%; left: 3%;
}

.box p{
   display: inline-block; padding: 0 50px;
}

.box img{
   width: 100%;
}
<a href="#" class="box">
   <img src="https://abrilmdemulher.files.wordpress.com/2016/09/receita-bolo-chocolate-com-morango.jpg?quality=90&strip=info&w=620&h=372&crop=1"/><p>Loremipsumdolorsitamet,consecteturadipiscingelit.</p><br/><button>SAIBAMAIS</button></a><ahref="#" class="box">
   <img src="https://abrilmdemulher.files.wordpress.com/2016/09/receita-bolo-chocolate-com-morango.jpg?quality=90&strip=info&w=620&h=372&crop=1" />
   <br />
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <br />
   <button>SAIBA MAIS</button>
</a>
    
07.11.2017 / 23:22
1

Another option is to use the class outline with offset negative. Simplifying the code would look like this: 

.outline {
    outline: red 1px solid;
    outline-offset: -10px;
}

<img class="outline" src="./suaImagem.jpg" alt=" ">

[] 's

    
20.11.2017 / 22:08
JavaScript - React JS Doubt about System.currentTimeMillis ()