CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abilash Erikson
Abilash Erikson

Reputation: 351

Less opacity for element-part which is going outside the div

Hi please see my html code .

$( function() {
   $( ".new-img" ).draggable();
});
.all{
  background-color:blue;
}
.new-multiple{
  width:400px !important;
  height:400px !important;
  background:white;
  border:2px solid red;
  overflow:visible;
  }
  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="all">
  <div class="new-multiple">
    <div class="new-img">
      <img src="https://launchbit.com/carbon-i/6599-ToptalCarbon.jpg">
    </div>
    
  </div>
</div>

https://jsfiddle.net/vd11qyzv/23/

Here i want to reduce the opacity of image part which is going outside the div [not for full image opacity , but for the portion going outside the .new-multiple div].

Is it possible ? Please advice .

Upvotes: 0

Views: 72

Answers (2)

Temani Afif
Temani Afif

Reputation: 273530

You may add an element with a high z-index in the Blue zone with opacity and the image will go under it like this :

BUT you will no more be able to dragg the image outside unless you change the z-index of the image after the drop.

$( function() {
   $( ".new-img" ).draggable({
      start: function( event, ui ) { $(this).css('z-index','99');  },
      stop: function( event, ui ) {$(this).css('z-index','9999999');}
   });
});
.all{
  background-color:blue;
  position:relative;
  width:500px;
}
.all:after {
    position: absolute;
    content: " ";
    top: 0;
    bottom: 0;
    right: 0;
    width: 198px;
    z-index: 9999;
    background: rgba(0, 0, 127, 0.68);
}
.new-multiple{
  width:300px !important;
  height:300px !important;
  background:white;
  border:2px solid red;
  overflow:visible;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="all">
  <div class="new-multiple">
    <div class="new-img">
      <img src="https://lorempixel.com/100/100/">
    </div>
    
  </div>
</div>

Upvotes: 1

Damion
Damion

Reputation: 49

If you want the image to be semi transparent, then i have updated your code:

https://jsfiddle.net/vd11qyzv/24/

HTML

<div class="all">
<div class="new-multiple">
    <div class="new-img">
    <img src="https://launchbit.com/carbon-i/6599-ToptalCarbon.jpg">
    <div><img src="https://launchbit.com/carbon-i/6599-ToptalCarbon.jpg"></div>
    </div>

</div>
</div>

CSS

.all{
    background-color:blue;
}
.new-multiple{
    width:400px !important;
    height:400px !important;
    background:white;
    border:2px solid red;
    overflow:visible;
}

.new-img  {
    display:inline-block;
}  
.new-img > img {
    opacity:0.5;
}

.new-img div {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    overflow:hidden;
}

JS

$( function() {
$( ".new-img" ).draggable({
    drag: function() {
            var left = $(this).position().left - $(".new-multiple").position().left;
        var width = $(this).outerWidth();
        var parentwidth = $(".new-multiple").outerWidth();
        var childwidth = parentwidth - (width + left);

        console.log(left, width, parentwidth)
        console.log(childwidth, width + childwidth);

        $('.new-img div').css({width: width + childwidth})
    }
});
});

Upvotes: 2

Related Questions