CSS3 image frame-border z-index
Some part of the image would have to be hidden to create what you want.
Create the main div that has your image, and another div for frame border.
This main div is relatively positioned, so that absolutely positioned elements inside it are relative to it.
Apply your frame border background to child div, and not the image. This child div should be almost the same width and height of image and z-index more than image. Also, position it slightly top and left to image.
<div class="main">
<div class="image-container">
<!-- does not actually contain the image -->
</div>
<img src="some image"/>
</div>
JS Fiddle
I used plain borders to show overlap. The green border overlaps the yellow bg of image.
Here's the CSS:
.main {
position: relative;
top: 100px;
left: 10%;
}
.image-container {
position: absolute;
left: -70px;
top: -70px;
border: 20px solid rgba(25,255,25, 0.5);
z-index: 5;
width: 230px;
height: 330px;
border-image: url('your frame link') 90 90 90 90 stretch stretch;
border-color: #f4be52;
border-style: inset;
border-width: 86px;
}
img {
position: absolute;
background: #eaff77;
width: 260px;
height: 360px;
z-index: 1;
}
.main:hover > img {
z-index: 10;
}
Update:
I have updated the fiddle with real images and proper width and height. Plz check.
When you hover on the image, you see the real size. This is just to prove that the Frame is actually overlapping the image, which is what you wanted.
CSS image z-index image border - create image slider with frame around image and two navigation buttons
Like I said in my comment, your styles are messed up with inline CSS styles and linked classes. Also, there's no need to have all containers in absolute position.
Here's your demo. Is this what you're after?
__________EDIT_______________
It seems that you're having z-index issues so I've made a demo without using any stack positioning. Just use the classes that I include in the following demo.
Demo without z-index.
how to make z-index property work on table-border
It seems a bit odd, but what seems to be happening is that the border scrolls even when the element itself is inside a sticky one which has stuck.
This snippet does a slightly hacky workaround - putting a left side border on each th which has a light grayish color. If you put it just on the 5th th it tends to look just slightly different from the others, so this makes them all the same.
The after pseudo element does not scroll so the purple bits go underneath OK.
tr.stickyth th:nth-of-type(n)::before {
content: '';
position: absolute;
width: 0.5px;
height: 100%;
top: 0;
left: -1px;
background-color: #eeeeee;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<style media="screen">
body {font-size: 120%;}
td, th {text-align: center;}
.stickyth th {position: sticky; top: -1px; background: #ccc; z-index: 3;}
.col5-out {position: relative; z-index: 2;}
.col5-inner {background-image: linear-gradient(135deg, #6303B1, #ff0099); max-width: 25%; left: -22px; border-radius: 25%; transform: rotate(-23deg); top: -11px; position: absolute;}
.col5-content {font-size: 75%; padding: 1px 6px;}
</style>
</head>
<body>
<table class="table table-bordered table-striped table-hover">
<tr class="stickyth">
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
<th>column 5</th>
<th>column 6</th>
<th>column 7</th>
<th>column 8</th>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
<tr class="not-sticky">
<td>some text 1</td><td>some text 2</td><td>some text 3</td><td>some text 4</td>
<td><div class="col5-out">some text 5<div class="col5-inner"><div class="col5-content">tinytext</div></div></div></td>
<td>some text 6</td><td>some text 7</td><td>some text 8</td>
</tr>
</table>
</body>
</html>border-image over an image
You can achieve that by:
Using the image as a background
.sprocket-mosaic-image-container { position: absolute; /** define width and height of the image **/ width: 375px; height: 281px; /** set the box sizing so the border dimensions would be part of the width and height **/ box-sizing: border-box; border-style:solid; border-width: 60px 28px 87px 24px; -moz-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat; -webkit-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat; -o-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat; border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat; /** set the image as background **/ background: url(http://i.imgur.com/rdZ1sYQ.jpg) no-repeat; /** define the origin so the image would be under the border **/ background-origin: border-box; z-index:1;}
.sprocket-mosaic .sprocket-mosaic-image { position:relative; z-index:0;}<div class="sprocket-mosaic-image-container"></div>Offset a border over an image
Wrap the image with an inline block, and set an absolutely positioned pseudo-element as the border:
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>Image border that covers half bottom and half right only
A solution using only the image tag:
img {
/* add bottom border */
padding:0 20px 20px 0;
background:linear-gradient(blue 0 0) 100% 100% / 60% 60% no-repeat;
/* cut top corner */
clip-path:polygon(30% 0,100% 0,100% 100%,0 100%,0 30%);
}<img src="https://picsum.photos/200">Related Topics
How to Use '&' and a Tag on the Same Selector
CSS Attribute Selector + Descendant Gives a Bug in Webkit
Give a CSS Styled Div a "Border-Left-Image"
CSS - How to Select Multiple Different Child Elements Within a Parent Without Repeating the Parent
How to Load CSS File Dynamically
Remove Padding from Unordered List
Angular Material Md-Datepicker Inside Bootstrap Modal
Take 2 Columns in 2-Columns Layout But Not When 1-Column Layout in CSS Grid Without @Media
Multiple Background Images Using SASS/Compass
Wobbly CSS Animation with Border-Radius in Internet Explorer
Is -Negative Margin or Padding Invalid CSS According to W3C
How to Add Multiple Linear-Gradients to a CSS Background
Do Inline Elements Establish a Line Box for Their Content
CSS - <Li> Items in Horizontal Menu Have a Gap Between Them
Bootstrap Thumbnail Grid Not Starting a New Row Correctly