html - attribute - Desplazar un borde sobre una imagen

title html attribute

Question

Estoy tratando de crear exactamente lo que se muestra en la imagen de abajo. También he intentado otros métodos utilizando el método de contorno y desplazamiento, pero no pude averiguar cómo seguir haciendo esto.

Aquí está el JSFiddle :

img {
border: 4px solid green;
}

<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">

¿Cómo hago para obtener este borde de desplazamiento sobre la imagen?

Answer 1

Envuelva la imagen con un bloque en línea y establezca un pseudoelemento posicionado absolutamente como borde:

body {
padding: 50px 0 0 80px;
}
.imageContainer {
display: inline-block;
position: relative;
}
.imageContainer::before {
position: absolute;
top: -5%;
left: -15%;
width: 100%;
height: 100%;
border: 4px solid #77B244;
content: '''';
}

<div class="imageContainer">
<img src="https://cdn.pixabay.com/photo/2013/07/31/12/25/cat-169095_960_720.jpg" alt="services_gas_oil" border="0">
</div>

Answer 2

Otra posibilidad sería envolver la imagen dentro de un elemento div con un borde y mover la imagen dentro del contenedor hacia la izquierda y hacia abajo.

A partir de la Documentation :

Un elemento relativamente posicionado es un elemento cuyo valor de position calculado es relative . Las propiedades top e bottom especifican el desplazamiento vertical desde su posición normal; Las propiedades left y right especifican el desplazamiento horizontal.

Tendremos que envolver img dentro de un elemento como div es decir:

<div class="image-holder">
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" >
</div>

Aplicaremos un border al contenedor y moveremos la imagen desde su posición normal con el siguiente 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>

Alternativamente, podemos usar CSS3 translate() también.

.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>

Answer 3

Una forma más sencilla sería utilizar una combinación de borde, contorno y un outline-offset negativo del outline-offset . Aquí hay un ejemplo :

img{
outline:4px solid #77B244;
outline-offset:-100px;
border:50px solid transparent;
border-width:150px 50px 50px 150px;
margin:-75px 0 0 -75px;
}

<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">

Esto evita el uso de un elemento padre y un pseudo elemento.