Another possibility would be to wrap image inside a div
element having a border and move image inside container towards left and bottom.
As from Documentation:
A relatively positioned element is an element whose computed position
value is relative
. The top
and bottom
properties specify the vertical offset from its normal position; the left
and right
properties specify the horizontal offset.
We will need to wrap img
inside an element like div
i.e:
<div class="image-holder">
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" >
</div>
We will apply border
to the container and move image from its normal position with following CSS:
.image-holder img {
position: relative;
z-index: -1;
left: 40px;
top: 40px;
}
.image-holder {
border: 7px solid #76af46;
display: inline-block;
vertical-align: top;
}
.image-holder img {
position: relative;
z-index: -1;
left: 40px;
top: 40px;
}
<div class="image-holder">
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
</div>
Alternatively, we can use CSS3 translate()
as well.
.image-holder img {
transform: translate(40px, 40px);
position: relative;
z-index: -1;
}
.image-holder {
border: 7px solid #76af46;
display: inline-block;
vertical-align: top;
}
.image-holder img {
transform: translate(40px, 40px);
position: relative;
z-index: -1;
}
<div class="image-holder">
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
</div>