CODEWITHSUNDEEP
htmlcss
DA-G-GURU
DA-G-GURU

Reputation: 141

Putting a border around image on lightbox pop up

Hello I have added a image on pop up images that do not completely fill the img width and height, and it looks pretty cool.

I am also wanting to add this same 6px border around all the pop up images ONLY, and so far I am able to get the image and title and close in the border, which is not what I am after.

If you go here

http://dagrafixdesigns.com/2019/industrial-darker/graphics.html

Then click on the Rafters tab and then click the image of PIGSKIN, you will see a nice border and BG image on pop up....my code

.mfp-figure::after {
    background: #181818 none repeat scroll 0 0;
    border: 6px solid #333;
    bottom: 40px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    content: "";
    display: block;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
    width: auto;
    z-index: -1;
}

If you then close out and click the HELMET tab, and then a helmet, you will see a image with no border on pop out.

Would there be a element to wrap the image only? or a pseudo class of :: to grab it?

Thank you

Upvotes: 0

Views: 660

Answers (1)

Chris Happy
Chris Happy

Reputation: 7295

Try using this code instead of yours:

.mfp-figure::after {
    /*border: 6px solid #333;*/
    bottom: 40px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    content: "";
    display: block;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
    width: auto;
    z-index: 1; /*above the image*/
}

It makes the border above the image. If you still want the background on the back, use the before element with this code:

.mfp-figure::after {
    background: #181818 none repeat scroll 0 0;
    bottom: 40px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    content: "";
    display: block;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
    width: auto;
    z-index: -1;
}

Upvotes: 1

Related Questions