CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Si8
Si8

Reputation: 9225

How to drop shadow on a image in a div inside another div

Original HTML:

<div class="content-box-blue content-box">
    <img src="text.png" style="z-index: 5; display: inline-block; overflow: hidden; position: absolute; top: 0; right: 0;" alt="">
    <div class="title content-box-title">
        <div style="display: inline-block; width: 30px; height: 30px; vertical-align: middle; overflow: hidden; padding: 0 10px 0 0;">
            <img src="theImage.png" style="z-index: 5; display: inline-block; overflow: hidden;" class="tileSprite animImage" alt="">
        </div>Annett
    </div>
    <div class="content"></div>
</div>

Script:

$("div.content-box").hover(function () {
    $(this).children("div:first-child").children("div").find("img").animate($(this).css("-webkit-filter", "drop-shadow(2px 2px 2px #00f)"), 500);
    console.log($(this).children("div:first-child").children("div").find("img").length);

}, function () {
});

After hover script executes:

<div class="content-box-blue content-box" style="-webkit-filter: drop-shadow(rgb(0, 0, 255) 2px 2px 2px);">
    <img src="text.png" style="z-index: 5; display: inline-block; overflow: hidden; position: absolute; top: 0; right: 0;" alt="">
    <div class="title content-box-title">
        <div style="display: inline-block; width: 30px; height: 30px; vertical-align: middle; overflow: hidden; padding: 0 10px 0 0;">
            <img src="theImage.png" style="z-index: 5; display: inline-block; overflow: hidden;" class="tileSprite animImage" alt="">
        </div>Annett
    </div>
    <div class="content"></div>
</div>

How can I modify the script so the drop-shadow is on the image and not in the div.

Upvotes: 1

Views: 73

Answers (2)

GuybrushThreepwood
GuybrushThreepwood

Reputation: 153

With CSS selector is more quickly & easy

<style>
    .content-box-title img{
        -webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
    }
    .content-box-title:hover img{
        -webkit-filter: drop-shadow(2px 2px 2px #00f);
    }
</style>

Upvotes: 0

NiZa
NiZa

Reputation: 3926

Your selector was wrong. You used the selector of the div.

I changed it to this:

$(this).find(".animImage").css("-webkit-filter", "drop-shadow(2px 2px 2px #00f)")

Demo

$("div.content-box").hover(function() {
  $(this).children("div:first-child").children("div").find("img").animate($(this).find(".animImage").css("-webkit-filter", "drop-shadow(2px 2px 2px #00f)"), 500);

}, function() {});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-box-blue content-box">
  <div class="title content-box-title">
    <div style="display: inline-block; width: 30px; height: 60px; vertical-align: middle; overflow: hidden; padding: 0 10px 0 0;">
      <img src="theImage.png" style="z-index: 5; display: inline-block; overflow: hidden;" class="tileSprite animImage" alt="">
      <img src="theImage.png" style="z-index: 5; display: inline-block; overflow: hidden;" class="tileSprite" alt="">
    </div>Annett
  </div>
  <div class="content"></div>
</div>

Upvotes: 1

Related Questions