How do I add a skewed shadow effect to this image?

Question

How do I add a skewed shadow effect to this image?

Please take a moment to view the following image.

https://i.sstatic.net/utBgB.png

I attempted the code below, but unfortunately it did not produce the desired result.

    z-index: -1;
content: "";
box-shadow: 86px 0 17px rgba(0,0,0,0.33);
-webkit-transform: skew(-36deg);
-moz-transform: skew(-36deg);
-ms-transform: skew(-36deg);
-o-transform: skew(-36deg);
transform: skew(-36deg);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;

Please also refer to the second image linked below

click here for image description

https://i.sstatic.net/LUqhi.png Any assistance would be greatly appreciated.

Thank you.

jquery css

Answer 1

Answer №1

Utilize a pseudoclass and apply a rotation to create a shadow effect. Take a look at this code snippet.

img {
  max-width: 100%;
  border-radius: 120px;
}
.image-wrapper {
  position: relative;
  width: 250px;
  transform: rotate(20deg);
  transform-origin: 0% 100%;
}
.image-wrapper:before{
   z-index: -1;
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 120px;
  transform: rotate(25deg);
  transform-origin: 70% 70%;
}

<div class="image-wrapper">
  <img src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/cat.jpg" alt="">
  </div>

Answer 2

Utilize a pseudoclass and apply a rotation to create a shadow effect. Take a look at this code snippet.

img {
  max-width: 100%;
  border-radius: 120px;
}
.image-wrapper {
  position: relative;
  width: 250px;
  transform: rotate(20deg);
  transform-origin: 0% 100%;
}
.image-wrapper:before{
   z-index: -1;
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 120px;
  transform: rotate(25deg);
  transform-origin: 70% 70%;
}

<div class="image-wrapper">
  <img src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/cat.jpg" alt="">
  </div>

How do I add a skewed shadow effect to this image?

Answer №1

Similar questions

Display stylish Instagram-like dots in the slick slider

Creating a Dynamic 4-Column Website Design with HTML and CSS Div Elements

What's the best way to add animation to the send icon while hovering over the button?

The background image will expand to fill any available space

Changing the text link color on IOS can be achieved by modifying the CSS properties

Is it advisable to restrict ajax requests?

What is the best way to attach every sibling element to its adjacent sibling using jQuery?

What's the most lightweight jQuery dialog that isn't modal?

How can I place a Pure CSS Menu within a Div Container?

Text displayed in a pop-up when hovering

Foundation 6: Conceal the Top Bar upon Clicking a Link

What are the various form actions available on an HTML webpage?

How can I add an image to a canvas using a button?

What is the process for transferring information from HTML to Python and then receiving the output in HTML?

Converting a Rails array into a jQuery selector

rely on a fresh event starting at one

Guide on transforming Div content to json format with the use of jquery

Parsing of the module failed due to an unexpected character appearing when trying to insert a TTF file into the stylesheet

CORS error causing Jquery ajax request to fail

Inflexible lists refusing to wrap