OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

CSS Drop-shadow errantly applying to <img> container in some places instead of the <img> element

  • Thread starter Thread starter SwineBurglar
  • Start date Start date
S

SwineBurglar

Guest
I am creating a website which has multiple <section> elements. In most of the <section> elements, I am able to properly apply a CSS filter: drop-shadow rule to a given <img> element by giving it an id in the HTML and then specifying that id in the CSS and giving it a rule like filter: drop-shadow(0px 0px 5px black);.

However, in one <section> on the page, when I do the above method to apply a drop-shadow to images within that section, the drop-shadow is applied to the individual containing <div> elements, instead of the <img> elements themselves.

The HTML of the section in question is:

Code:
<section class="skills" id="skills">
      <h2 class="skill-header">Skills</h2>

      <div class="skills-wrapper">
        <div class="icon-wrapper">
          <img
            src="./assets/memojis/Me-Memoji-wondering-flipped.png"
            alt="Me wondering memoji"
            loading="lazy"
            class="icon icon-card skills-memoji"/>
        </div>
        <div class="icon-wrapper">
          <img
            src="./assets/icons/icons8-html-5.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
        </div>
        <div class="icon-wrapper">
          <img
            src="assets/icons/icons8-css3.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
        </div>
      </div>
      <div class="skills-wrapper">
        <div class="icon-wrapper">
          <img
            src="assets/icons/icons8-javascript.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
        </div>
        <div class="icon-wrapper">
          <img
            src="assets/icons/icons8-bootstrap.svg"
            alt=""
            loading="lazy"
            class="icon icon-card"
          />
        </div>
        <div class="icon-wrapper">
          <img
            src="./assets/memojis/Me-Memoji-thumbs-upping.png"
            alt="Me giving a thumbs up"
            loading="lazy"
            class="icon icon-card skills-memoji"
          />
        </div>
      </div>
    </section>

The CSS is:

Code:
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-background);
  /* background-image: url("./background.svg"); */
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-text);
  text-shadow: var(--text-shadow);
}

.skills {
  align-items: center;
  margin: var(--margin-section-standard);
  max-width: var(--section-max-width);
  width: var(--section-width);
  background-color: var(--color-section);
  border-radius: var(--border-radius-right-trapezoid-large);
  padding: var(--padding-section-standard);
  border: var(--border);
  box-shadow: var(--box-shadow);
  scroll-margin-block-start: var(--scroll-margin-block-start);
}

.skills h2 {
  margin-bottom: var(--bottom-margin-1);
  text-align: center;
}

.skills div {
  line-height: var(--line-height);
  padding: 0.4rem;
  text-align: center;
}

.skills .skills-wrapper {
  width: 100%;
}

.icon-wrapper {
  display: inline-grid;
  width: 20%;
  justify-content: center;
  margin: 1rem;
}

.icon {
  filter: var(--drop-shadow-image);
}

.icon-card {
  background-color: var(--color-background);
  border-radius: var(--border-radius-right-trapezoid-small);
  box-shadow: var(--box-shadow);
  padding: 1rem;
  /* margin: 10px; */
  width: 12rem;
  border: var(--border);
}

.skills-memoji {
  /* filter: var(--drop-shadow-image); */
}

When I un-comment the filter rule in the .skills-memoji ruleset in order to make it active, the drop-shadow is applied to the containing element of class .icon-wrapper. I am trying to figure out how to get the drop-shadow to apply to the actual <img> elements in the HTML, as specified in the CSS by their class .skills-memoji.
<p>I am creating a website which has multiple <code><section></code> elements. In most of the <code><section></code> elements, I am able to properly apply a CSS <code>filter: drop-shadow</code> rule to a given <code><img></code> element by giving it an <code>id</code> in the HTML and then specifying that <code>id</code> in the CSS and giving it a rule like <code>filter: drop-shadow(0px 0px 5px black);</code>.</p>
<p>However, in one <code><section></code> on the page, when I do the above method to apply a drop-shadow to images within that section, the drop-shadow is applied to the individual containing <code><div></code> elements, instead of the <code><img></code> elements themselves.</p>
<p>The HTML of the section in question is:</p>
<pre class="lang-html prettyprint-override"><code><section class="skills" id="skills">
<h2 class="skill-header">Skills</h2>

<div class="skills-wrapper">
<div class="icon-wrapper">
<img
src="./assets/memojis/Me-Memoji-wondering-flipped.png"
alt="Me wondering memoji"
loading="lazy"
class="icon icon-card skills-memoji"/>
</div>
<div class="icon-wrapper">
<img
src="./assets/icons/icons8-html-5.svg"
alt=""
loading="lazy"
class="icon icon-card"
/>
</div>
<div class="icon-wrapper">
<img
src="assets/icons/icons8-css3.svg"
alt=""
loading="lazy"
class="icon icon-card"
/>
</div>
</div>
<div class="skills-wrapper">
<div class="icon-wrapper">
<img
src="assets/icons/icons8-javascript.svg"
alt=""
loading="lazy"
class="icon icon-card"
/>
</div>
<div class="icon-wrapper">
<img
src="assets/icons/icons8-bootstrap.svg"
alt=""
loading="lazy"
class="icon icon-card"
/>
</div>
<div class="icon-wrapper">
<img
src="./assets/memojis/Me-Memoji-thumbs-upping.png"
alt="Me giving a thumbs up"
loading="lazy"
class="icon icon-card skills-memoji"
/>
</div>
</div>
</section>
</code></pre>
<p>The CSS is:</p>
<pre class="lang-css prettyprint-override"><code>* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
background-color: var(--color-background);
/* background-image: url("./background.svg"); */
background-repeat: no-repeat;
background-size: cover;
color: var(--color-text);
text-shadow: var(--text-shadow);
}

.skills {
align-items: center;
margin: var(--margin-section-standard);
max-width: var(--section-max-width);
width: var(--section-width);
background-color: var(--color-section);
border-radius: var(--border-radius-right-trapezoid-large);
padding: var(--padding-section-standard);
border: var(--border);
box-shadow: var(--box-shadow);
scroll-margin-block-start: var(--scroll-margin-block-start);
}

.skills h2 {
margin-bottom: var(--bottom-margin-1);
text-align: center;
}

.skills div {
line-height: var(--line-height);
padding: 0.4rem;
text-align: center;
}

.skills .skills-wrapper {
width: 100%;
}

.icon-wrapper {
display: inline-grid;
width: 20%;
justify-content: center;
margin: 1rem;
}

.icon {
filter: var(--drop-shadow-image);
}

.icon-card {
background-color: var(--color-background);
border-radius: var(--border-radius-right-trapezoid-small);
box-shadow: var(--box-shadow);
padding: 1rem;
/* margin: 10px; */
width: 12rem;
border: var(--border);
}

.skills-memoji {
/* filter: var(--drop-shadow-image); */
}
</code></pre>
<p>When I un-comment the <code>filter</code> rule in the <code>.skills-memoji</code> ruleset in order to make it active, the drop-shadow is applied to the containing element of class <code>.icon-wrapper</code>. I am trying to figure out how to get the drop-shadow to apply to the actual <code><img></code> elements in the HTML, as specified in the CSS by their class <code>.skills-memoji</code>.</p>
Continue reading...
 

Latest posts

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top