CODEWITHSUNDEEP
htmlcsscss-position
nick
nick

Reputation: 1178

Positon css border under text and under image

So I'm trying to get this effect with the border under the text and image.

Example

My code so far looks like this:

html:

<div class="grid-child" id="imageContainer">
     <div class="borderImage"></div>
     <img src="src" border="0" />
</div>

css:

.borderImage {
  position: absolute;
  width: 600px;
  height: 450px;
  z-index: -1; // just makes the border disappear.
}

.borderImage:after {
  content: '';
  position: absolute;
  top: 15%;
  left: -36%;
  width: 35%;
  height: 100%;
  border-top: 4px solid #cccccc;
  border-left: 4px solid #cccccc;
  border-bottom: 4px solid #cccccc;
}

Upvotes: 0

Views: 55

Answers (1)

Lakhdar
Lakhdar

Reputation: 422

Try this

#imageContainer {
  height: 800px;
}

img {
  position: absolute;
  top: 10%;
  right: 15%;
}

.borderImage {
  position: absolute;
  width: 600px;
  height: 400px;
  z-index: -1; // just makes the border disappear.
}

.borderImage:after {
  content: '';
  position: absolute;
  top: 20%;
  right: 25%;
  width: 35%;
  height: 100%;
  width: 300px;
  border-top: 4px solid #cccccc;
  border-left: 4px solid #cccccc;
  border-bottom: 4px solid #cccccc;
  border-right: 4px solid #cccccc;
}

and check the example i made in jsfiddle:

https://jsfiddle.net/LaKhDaR/auewovfr/118/

Upvotes: 1

Related Questions