I want the inner shadow of my div to come over it's content (please note that I don't simply want the image to have an inner shadow, I have a much more complicated scrollable div with so many children this is just a minimal example.
div {
white-space: nowrap;
box-shadow: inset 0 0 10px #000000;
}
img {
display: block;
}
<div>
<img src="http://www.claireking.com/wp-content/uploads/2018/01/images.png" />
</div>
Agree with Vitalii Chmovzh answer, but in case you don't want any space by padding.
So just use this for your img tag.
img{
display: block;
position:relative;
z-index:-1;
}
Without changing sizes of your box model.
Updated fiddle
Just add padding for a shadow amount.
div {
white-space: nowrap;
box-shadow: inset 0 0 10px #000000;
padding: 10px;
}
See working fiddle:
https://jsfiddle.net/f0qasdo6/
UPD: Another working example without changing div size:
div {
white-space: nowrap;
position: relative;
}
div:before {
content: '';
display: block;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 10px #000000;
}
Downside of this approach is that you will not be able to click on the content inside the div, so it can be used to add an effect to non-interactible blocks.
See fiddle:
https://jsfiddle.net/r3t2p2cw/
The issue with this is that the image gets rendered over the shadow.
Try this,
div {
white-space: nowrap;
position: relative;
}
img{
display: block;
}
div::before {
box-shadow: inset 0 0 10px #000000;
position: absolute;
width: 100%;
height: 100%;
content: "";
}
Somehow your image doesn't work for me. Here is the solution:
div {
width: 70%;
white-space: nowrap;
box-shadow: inset 0 0 10px #000000;
}
img{
width: 100%;
display: block;
position: relative;
z-index: -1;
}
https://jsfiddle.net/tp9pz9w0/7/
Related
How to make a fixed positioned div fit its content width?
I've made a demo here
Before clicking on the Load button, the div must only have enough width to contain the gif image and the button.
When more content is loaded, the width of the div must fit its width.
here is the CSS I've made
body{background: #eee; }
#divToCenter{
border-radius: 5px;
box-shadow: 0 0 0 10px rgba(0,0,0,0.2);
background: #fff;
padding: 20px;
position: fixed;
top: 20px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
max-width: 400px;
}
Since you are using JavaScript/jQuery to show/hide the loader, why don't you change the width of the box via JavaScript?
You could simply toggle a class called .wide for instance, to achieve the desired result as follows:
EXAMPLE HERE
CSS:
#divToCenter{
/* other declarations... */
text-align: center;
width: 50px;
}
#divToCenter.wide {
width: 400px;
text-align: left;
}
jQuery:
var $divToCenter = $("#divToCenter");
$("#show-more-data").click(function() {
// ...
$divToCenter.addClass("wide");
});
$("#show-less-data").click(function() {
// ...
$divToCenter.removeClass("wide");
});
Add display: table, position: relative and margin:0 auto to the following element:
#divToCenter{
border-radius: 5px;
box-shadow: 0 0 0 10px rgba(0,0,0,0.2);
background: #fff;
padding: 20px;
display: table;/*Add this*/
position: relative;/*Change fixed with relative*/
top: 20px;
margin:0 auto;/*Add this*/
max-width: 400px;
}
fiddle
Trying to apply max-width in case of text wrap for tooltip in this jsfiddle, but it applies the default width.
HTML:
<div id="container" style="margin: 167px 135px 0px 0px; height: 400px">
<a class="tooltip" tip="television">content1</a>
<a class="tooltip" tip="By noon yesterday, news television screens were filled with visuals of a Delhi we have been familiarized with over the past year.">content2</a>
</div>
CSS:
.tooltip{
display: inline;
position: relative;
white-space: pre-wrap; /* css-3 */
margin: 20px 20px 20px 20px;
height: 30px;
width: 50px
}
.tooltip:hover:after{
background: #8FBC8F;
border-radius: 5px;
bottom: 26px;
color: #000;
content: attr(tip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width:auto;
min-width:50px;
max-width:500px;
}
.tooltip:hover:before{
border: solid;
border-color: #8FBC8F transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
when the text in the tooltip is getting word wrapped, width should go up to some max width instead of the default width so that it is convenient for reading.
this jsfiddle works when i put display: inline-table; like below
.tooltip:hover:after{
:
:
display: inline-table;
}
But it works only in Chrome and not on IE
You have to use display:inline and max-width and for some browser use word wrap.There is a good tutorial to create css3 tooltip create css3 tooltip.
Here's some code from that tutorial:
.tooltip
{
display: inline;
position: relative;
}
.tooltip:hover:after
{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
max-width: 220px;
}
Stumbled upon the same problem, and after some fiddling found following workaround for my case: you have to wrap tooltip content in another element, which will have your expected max-width for the tooltip in width, and positioned absolute. Then wrapped content will use this as baseline max width while wrapping text.
Verified that it works in latest public IE/Edge/Chrome/FF at the time of writing
Codepen: https://codepen.io/jfhs/pen/LzbwgJ
In code:
<div class="tooltip">
<div class="tooltip-content-wrapper">
<div class="tooltip-content">Long long text</div>
</div>
</div>
CSS:
.tooltip {
position: relative;
}
.tooltip-content-wrapper {
position: absolute;
width: 100px; /* THIS is your max-width for tooltip */
visibility: hidden;
}
.tooltip:hover .tooltip-content-wrapper {
visibility: visible;
}
.tooltip-content {
display: inline-block;
}
Please change your CSS min-width and max-width like below:
.tooltip:hover:after{
background: #8FBC8F;
border-radius: 5px;
bottom: 26px;
color: #000;
content: attr(tip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width:auto;
min-width:500px; /* I have changed here */
max-width:500px;
}
I came across this old question as I too was looking to see if it was possible to get min-width and max-width to work without having to add JavaScript or extra elements (as I was sourcing the tooltip text from an attribute). It turns out that changing width: auto; to width: max-content; in your jsfiddle does the trick (as suggested at: https://stackoverflow.com/a/62853552). Screenshot:
For some reason, it seems like there is extra padding on the bottom of my div that holds an image inside it.
Here is the JSFiddle: http://jsfiddle.net/KSs7V/
Any idea on how that got there/how to fix it?
CSS:
.artist-box {
width: 100%;
text-align: center;
position: relative;
display: inline-block;
}
.artist-pic {
height: 245px;
margin: 0;
/*box-shadow: 0 0 10px black;*/
}
#artist-wrap {
max-width: 1800px;
margin-top: 5px;
}
.indArtistBox {
display: inline-block;
margin-right: 10px;
position: relative;
border: 1px solid #000;
}
Just add vertical-align:top or display:block to your image rules:
.artist-pic {
height: 245px;
margin: 0;
vertical-align:top;
/*box-shadow: 0 0 10px black;*/
}
jsFiddle example
An alternate option is to add font-size:0 on the image container div:
.indArtistBox {
display: inline-block;
margin-right: 10px;
position: relative;
border: 1px solid #000;
font-size:0;
}
jsFiddle example
The gap is due to the space reserved for descender elements (e.g. 'j', 'g', 'y') as images are inline elements.
I'm having some problems with anchor and image tags. My image tags are sitting inside (what is essentially) a div tag each, the div tags have constant height and width values. The image tags are given a constant height value, so their width can be calculated based on their aspect ratio and the images do not become distorted when they're resized to fit inside the div.
I want to have an anchor tag surrounding each image for two reasons. (1.) So the images can act as links, but also (2.) so that when the user hovers over the image, I can display an overlay on top of the image.
Putting the image tag inside an anchor tag solves the problem of the link, but as for the second problem, I'm stumped. I need the anchor tag to dynamically size and position itself over its respective image tag. Ideally I'd like to avoid using JavaScript to solve the problem and just stick to CSS (if possible). I have no objection to adding a little extra markup if needs be.
Relevant HTML:
<listitem>
<img src="../images/image1.jpg"/>
</listitem>
<!--More listitems with different sized images go here-->
And the CSS:
#pictureListContainer listitem {
position: relative;
background-color: rgba(0,0,0,0.5);
display: block;
height: 257px;
width: 636px;
}
#pictureListContainer listitem img {
position: relative;
float: right;
height: 203px !important;
vertical-align: middle;
margin: 21px 296px 21px auto;
border: 6px solid white;
border-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}
Thanks in advance.
Update: I should maybe make it clear that I would like the overlay to have the same dimensions as the image, so that it only overlays the image.
It can be done using only CSS and HTML: JSFiddle
HTML
<div class="listitem">
<a href="#">
<img src="http://sublantic.net/forge/demos/img/code_canyon/scale.png" alt="image" />
<span class="overlay-text">Test</span>
</a>
</div>
CSS
.listitem {
position: relative;
background-color: rgba(0,0,0,0.5);
display: block;
height: 257px;
width: 636px;
overflow: hidden;
}
.listitem img {
position: relative;
float: right;
height: 203px !important;
vertical-align: middle;
margin: 21px 296px 21px auto;
border: 6px solid white;
border-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
position: relative;
}
.listitem a span {
display: none;
position: absolute;
bottom: 10px;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
padding: 10px;
color: #FFF;
}
.listitem a:hover span {
display: block;
}
Edit: Overlay fits to image
JSFiddle
CSS
.listitem {
position: relative;
background-color: rgba(0,0,0,0.5);
display: block;
height: 257px;
width: 636px;
}
.listitem img {
border: 6px solid white;
border-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}
.listitem a {
position: relative;
overflow: hidden;
display: inline-block;
}
.listitem a span {
display: none;
position: absolute;
bottom: 10px;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
padding: 10px;
color: #FFF;
}
.listitem a:hover span {
display: block;
}
You can use an onClick for the image
<img src="" onClick="" />
This will eliminate the botheration of generating functionality like overlay, etc for a tag and you can get both effects work simultaneously well.
Hope this helps.
On my website a banner image has a certain height (responsive) but it has an overlay (#vignette) which is nested inside an a-tag together with the banner image. #vignette gets its height from its parent:
#vignette {
box-shadow: inset 0 0 50px 4px rgba(0,0,0,0.35), inset 0 10px 10px rgba(0,0,0,0.05);
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
And the a-tag adjust its height to its content:
a#banner-image {
display: block;
position: relative;
width: auto;
height: auto;
}
How then is it possible that the a-tag is taller than the image itself? Can't seem to solve this. Thanks.
Ensure the img is displayed as a block element.
a#banner-image img {
display: block;
}
As #Ianzz correctly states, this is because of an issue with descender space for all inline elements.