I learned I can use :hover:after so I tried it myself, however it is not working:
.img-shadow img:hover:after {
-webkit-box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.75);
box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.75);
}
<div class="wpb_single_image wpb_content_element vc_align_left img-shadow">
<figure class="wpb_wrapper vc_figure">
<img width="100%" height="auto" src="http://dev.watmar.com.au/wp-content/uploads/2020/10/Power_generation.jpg">
</figure>
</div>
What are you trying to do actually here? If your aim is to use pseudo-element then you can use it to add content before and after through, ::before & ::after. Single colon for pseudo class, double colon for pseudo element. If in the above your aim is to add shadow you can add it directly, you need not use any pseudo-element for that. By using inset you can't see the shadow because it is inner side which is not visible, remove inset to see the shadow outside the image.
Hello
Dear If you use :after pseudo selector you should use
content: "";
position: absolute;
width: 100%;
height: 100%;
and its parent tag must use
position: relative;
but in your selected tag is not possible
position: relative;
in this case If you want to use
box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
You should must use padding inside the element, other wise you can not see the box-shadow.
For more Help you can visit this
Demo
I can try to give you full support.
.img-shadow img {
transition: all 0.5s;
padding: 20px;
}
.img-shadow img:hover {
-webkit-box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
}
<div class="wpb_single_image wpb_content_element vc_align_left img-shadow">
<figure class="wpb_wrapper vc_figure">
<img width="100%" height="auto" src="http://dev.watmar.com.au/wp-content/uploads/2020/10/Power_generation.jpg">
</figure>
</div>
Related
CSS
.ts-learn-img figure:hover{
-moz-box-shadow: inset 0 0 20px #000000;
-webkit-box-shadow: inset 0 0 20px #000000;
box-shadow: inset 0 0 20px #000000;
}
HTML:
<div class="wp-block-image ts-learn-img">
<figure class="aligncenter size-medium is-resized">
<a href="https">
<img src="https" alt="" class="wp-image-4076" width="225" height="60" srcset="https">
</a>
</figure>
</div>
This is a standard image block in Wordpress (Gutenberg) with a class specified for the block (ts-learn-img). I am trying to add a shadow around the image when the mouse hovers over it. But I am getting:
It is only adding a shadow on the base line. Now, I have tried using in the CSS:
.ts-learn-img figure a img:hover
And it made no difference. Is it not possible to have a complete shading of some kind when the mouse hovers over the image?
The actual webpage is here.
Based on the comments provided, the following steps were required:
I had to remove the excess transparency from around the image so that it was just the button.
I had to make changes to the CSS styles as follows:
.ts-learn-img figure {
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
border-radius: 5px !important;
}
.ts-learn-img img {
display: block;
}
.ts-learn-img figure:hover{
-moz-box-shadow: 0px 10px 20px #000;
-webkit-box-shadow: 0px 10px 20px #000;
box-shadow: 0px 10px 20px #000;
}
Now it looks much better!
I have some nicely styled CSS submit buttons, but the margin attribute doesn't seem to be working when two buttons fall side by side. Please see my image sample, below.
The buttons simply fall into a single div, like so:
<div>
<input type="submit" value="Confirm My Order.">
<input type="submit" value="Revise My Order.">
</div>
Here is the CSS:
input[type=submit]{
margin:0.6em,2em,1em,1em; /* Right margin (2nd value) is not working */
background: #808080;
padding: 5px 12px; /* padding inside the button */
border:1px solid #808080;
cursor:pointer;
-webkit-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color:#fff;
}
Given the right margin, I wouldn't think that the buttons would kiss like this. Any thoughts why the margin may not be working?
My thanks to you in advance.
If you inspect it using chrome devtools or similar, you will see that it notifies you of "Invalid Property Value". This is due to a syntax error. You want your css to be this
input[type=submit]{
margin:0.6em 2em 1em 1em; /* Right margin (2nd value) is now working */
The rest should be fine
Same as answer given but an explanation that is better.
When using multiple inputs into the margin css, you don't want to use the commas a simple space between each value is what's required.
input[type=submit]{
margin:0.6em 2em 1em 1em;
}
For further explanations on margins view this helpful link:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
I would like to put a shadow on the header image but it didn't work.
URL: http://testjeanschwartz.weebly.com/
I already try something like this:
.wsite-background
{
box-shadow: 0px 10px 5px #888888;
}
Putting a shadow is something I already did a lot of times but this one is not working.
Thanks.
Your box-shadow is covered by the elements that follow it (namely #main-wrap). You can change the z-index of your element to have it show 'above' other elements.
You will need to position your element something other than static for the z-index to be acknowledged:
.wsite-background {
box-shadow: 0px 10px 5px #888888;
position: relative;
z-index: 1;
}
For background image, you need inset property to handle it with the position relative or absolute.
Try this one:
.wsite-background{
position:relative;
-webkit-box-shadow: inset 0px 10px 5px #888888;
-moz-box-shadow: inset 0px 10px 5px #888888;
box-shadow: inset 0px 10px 5px #888888;
}
I'm attempting to recreate the shadow from the image below:
It's the shadow between the two colors I'm trying to recreate using box-shadow. But I can't figure it out.
Here's my code:
box-shadow: inset 0 0 2px 0px #000000;
The shadow appears on both sides and is too strong compared to what I'm trying to achieve. Any suggestions?
I've made the below fiddle from complete scratch, you can use it if you like it
Demo
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
.one {
background: #B4B300;
height: 100px;
}
.two {
background: #FD370A;
height: 100px;
box-shadow: 0 0 5px #212121;
}
.three {
background: #fff;
height: 5px;
}
Instead of using inset shadow, am using a shadow which renders from all sides, right left are hidden as the div spans entire row, the shadow at the bottom is hidden with another div using background: #fff;
Note: I forgot to add -moz and -webkit prefixes so be sure you use
them if you want to support the older browsers too.
http://jsfiddle.net/CQvBb/
<div class="first"></div>
<div class="second"></div>
.first {
background:#B4B300;
width:500px;
height:100px;
box-shadow: inset 0 -5px 5px -5px #000000;
-moz-box-shadow: inset 0 -5px 5px -5px #000000;
-webkit-box-shadow: inset 0 -5px 5px -5px #000000;
}
.second {
background:#FD370A;
width:500px;
height:100px;
}
<div id="cat"></div>
How to box-shadow for left and right side only?
(no shadow of upper lower side)
set the z-index of woof above meow and grrrr will show up on top of hisssss's shadow.
Here's an overflow hidden approach for one side shadow http://starikovs.com/2011/11/09/css3-one-side-shadow/. Hope it will help you.
With this you can do it http://jsfiddle.net/QkXqU/
CSS:
div {
float: left;
overflow: hidden;
padding: 0px 0px 10px 0px; /* Use padding on the side where you want to show shadow. Padding amount should be same as shadows blur length. */
}
img {
-webkit-box-shadow: 0px 0px 10px 0px #000000;
-moz-box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px #000000;
}
HTML:
<div>
<img src="http://lorempixum.com/output/nature-q-c-309-249-8.jpg" alt="trees" />
</div>