How can you create a unique custom border for an image and display it on another image?

I am working towards achieving a specific output similar to the one shown in this https://i.stack.imgur.com/ejiYC.png image.

Currently, I have successfully created the border section. Now, my next challenge is how to overlap images and apply borders as demonstrated in the reference image.

Below is the code snippet I am currently using:

<!DOCTYPE html>
<html>
<head>
    <style> 
        .img1 {

            border: 15px solid transparent;
            background: 
            linear-gradient(#faa633, #faa633) 
            top left/ /* position */
            50% 50% /* width height */
            border-box no-repeat;
            z-index: 1
        }

        .img2{
            border: 15px solid transparent;
            background: 
            linear-gradient(#faa633, #faa633) 
            top right/ /* position */
            50% 100% /* width height */
            border-box no-repeat;
            z-index: 2
        }
    </style>
</head>
<body>

    <img src="https://picsum.photos/id/10/200/150" class="img1">
    <img src="https://picsum.photos/id/10/200/150" class="img2" >


</body>
</html>
htmlcssimageborder

Answer №1

we can use pseudo elements to create this effect.

.image-container {
  display: inline-block;
  margin-left: 100px; /* used for testing */
  position: relative; /* must be added to the parent element */
}

.img1 {
  border: 15px solid transparent;
  background: linear-gradient(#faa633, #faa633) 
            top left/ /* position */
            50% 50% /* width height */
            border-box no-repeat;
  z-index: 1;
  position: absolute;
  bottom: -100px; /* push to bottom (half of the height) */
  left: -100px; /* push to left (half of the width) */
}

.img2-box {
  position: relative;
  display: inline-block;
}

.img2-box::before {
  position: absolute;
  content: '';
  width: 15px;
  height: 100%;
  left: 0;
  top: 0;
  background: #fff;
}

.img2-box::after {
  position: absolute;
  content: '';
  height: 15px;
  width: 60%;
  left: 0;
  top: 0;
  background: #fff;
}

.img2-box img {
  border: 15px solid #faa633
}
<div class="image-container">
  <img src="https://picsum.photos/id/10/200/200" class="img1">
  <div class="img2-box">
    <img src="https://picsum.photos/id/10/400/300" class="img2">
  </div>
</div>

Answer №2

To achieve the desired effect, utilize color within the :before pseudo-element. Please refer to the code snippet below: 

.outer {
 display: flex;
    align-items: flex-end;
}
img{max-width: 100%}
.img1 {
    position: relative;
    padding: 20px 0 0 20px;
    float: left;
    top: 90px;
    margin-right: -90px;
    width: 180px;
    z-index: 1;
}
.img2{
  position: relative;
  float: left;
  padding: 20px 20px 0 0;
  width: 400px;
      border-bottom: 20px solid red;
}
.img1 img, .img2 img{
  position: relative;
  display: block;
}
.img1:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 120px;
    background: red;
    display: block;
}
.img2:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: red;
    display: block;
}
<div class="outer">
<div class="img1"><img src="https://webmeup.com/upload/blog/lead-image-105.png"></div>
   <div class="img2"> <img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg"> 
     </div>
</div>

Hopefully this solution works for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Printing iframe does not display CSS effects

As I work on developing a program that involves the use of iframes, I have encountered an issue with CSS effects not appearing when trying to print the iframe. Despite applying CSS successfully in browsers like IE, Chrome, Mozilla, and Edge, the printed ou ...

javascriptphpcssajaxiframe

Instructions on how to prompt users to register using a distinctive code

Currently in the process of constructing a website and I'm interested in setting restrictions on the number of users who can sign up for it. https://i.stack.imgur.com/JD2Ct.png In the image provided, there is a database in phpMyAdmin labeled as &apo ...

phphtmlsqlphpmyadmin

Manipulating classes within ng-class in AngularChanging classes in ng-class dynamically

Featuring multiple elements with an ng-class that behaves similarly to a ternary operator: ng-class="$ctrl.something ? 'fa-minus' : 'fa-plus'" To access these elements, we can compile all the ones with fa-minus and store them in a lis ...

javascriptjquerycssangularjsjquery-selectors

Turn off the ability to click on images, but allow users to access the right

https://i.stack.imgur.com/jriaP.png Example image sourced from reddit.com Illustration represents the desired effect using CSS and possibly JS. In essence: I aim to make an image on a website unclickable to its imageURL There should be a context menu ...

javascriptjqueryhtmlcssimage

Transfer the image content to show in HTML using PHP

I have images stored in a secure location that I would like to display in HTML. Unfortunately, I can't simply link to the source using: <img src="secure_path/image.jpg"/> What I want to achieve is copying the image data with PHP and displaying ...

phpimage

Visual Composer now appends "?id=" to the background images of columns and rows, enhancing the customization

I am in the process of improving the performance of a WordPress site that is using the Visual Composer plugin. When checking GTmetrix results, I came across this issue: Ensure resources are served from a consistent URL https://example.com/wp-content/uploa ...

phpcsswordpresspagespeedvisual-composer

Setting a button next to an input field in Bootstrap 4: A step-by-step guide

I have a form group with a label and input field. My goal is to position the button next to the input field on the same line. Here's an example of my code: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstra ...

cssbootstrap-4

Responsive design and column alignment dilemma

I'm attempting to create a layout using Bootstrap 3.2.0 with tiled divs in a single row for screens wider than 768px. The divs have heights of either 50px or 100px, controlled by the classes "home-height-single" and "home-height-double," and widths ad ...

htmlcsstwitter-bootstraptwitter-bootstrap-3css-float

Arranging adjacent div blocks to maintain alignment in a stylish way

I am facing an issue with divs that are placed side by side inside a table. These divs have been styled to appear as colored blocks. Everything seems fine when the text within each div fits on two lines, however, if it overflows onto another line, the en ...

htmlcss

Tips for creating a full screen div layout with fixed top and bottom navigation bars

Can someone help me achieve the following layout style? +-----------------------------------------------------------+ | Top Sticky Nav | +--------------------------------------------------------+--+ | ...

htmlcssbootstrap-4

Concealing the print option while utilizing PDFObject in conjunction with PDF.js

When displaying a file using pdf.js, I encountered issues with the print button and other functionalities. I was able to hide the buttons using CSS for Chrome, but not for Internet Explorer, where I had to resort to using JavaScript. While the JavaScript ...

javascriptjquerycsspdf.jspdfobject

To fill the remaining white space, add an underline after the last line of text

I'm struggling to implement a SCSS/CSS styling concept where I need to add a solid line before or after the last line of a heading. The challenge is that the width of the last line varies based on the screen size. I am open to any suggestions. Here&a ...

htmlcssreactjssassnext.js

Utilizing PHP and HTML to pull various values from a single select option

Is there a way to retrieve multiple values from a single select option value? Here is an example: <html> <form method="post" action="#"> <select name="retrive_destination"> <?php while($row = mysql_fetch_assoc($result)){ ...

phphtmlmysqlarrays

Image with text overlay

In my content, the setup includes the following: <p class="All-Book-Text">Maecenas iaculis, ipsum at tempor placerat, orci ligula aliquam enim, sit amet sagittis turpis enim sit amet lorem. Praesent dapibus pretium felis, et tempus nibh posuere a.&l ...

css

A horizontal navigation bar featuring a centrally aligned vertical layout and full-height display

I want to align everything on my menu bar vertically in the center, with the a elements taking up 100% of the available height of the menubar (text would be vertically-centered). However, I do not want to fix the height of my menu bar. (If I were to fix th ...

htmlcss

Challenges with fading images using jQuery

I am currently working on animating a 5 image slideshow by creating a fading effect between the images rather than just switching abruptly. Here is my HTML structure: <div id="slides"> <ul class="pics"> <li><img src="imag ...

javascriptjqueryhtml

Insert round sphere shapes in the corners of the cells on the Table

I am working on a GUI representation table that features cells with spheres in the corner. Additionally, the footer contains a plus symbol (font-awesome icon) in the corner. I have attempted to place the sphere so that it aligns only inside the cell. Here ...

htmlcsshtml-tablecss-shapes

Generate time-dependent animations using circles

Hey there, I am trying to create an animation that involves drawing three circles and having one of them move from right to left. The circles should appear randomly in yellow, blue, or orange colors on the canvas at different intervals (3 seconds between ...

javascripthtmlcanvas

Creating a polyBezier or polyCurve with Canvas HTML: a step-by-step guide

Looking to connect several points with a curve rather than just a straight line. I attempted using the lineTo() and bezierCurveTo() methods to draw the points. Is there anyone who can assist me in solving this dilemma? Perhaps there is a different approac ...

javascripthtmlcanvas

Only display one div element when in print mode, hiding all others

My print style CSS code includes the following: * { display:none; } #printableArea { display:block; } Initially, I anticipated that this CSS would hide all elements except for the printableArea. Surprisingly, everything on the page became hidden when ...

css