How to give opacity for div when it is set Overflow=visible

I have 1 div and 1 image tag , one upon the other. Div is smaller than image. I have set overflow=visible for div. My question is that, when I insert an image to image tag, the content which is overflowed through div should be opacity=0.5 like this.

for me it shows like this.. any help

  <div style="border-style: solid; border-width: 2px; height: 5cm; width: 8cm; 
       top: 20px; left: 20px; position: relative;  overflow: visible;" id="divimg">
            
  <img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" style="height: 7cm; width: 10cm;" />
                    
           
                
        </div>

Answers


Here is the demo for your requirement.

.outter_div{width:400px; height: 200px;position: relative;}
.outter_div:after{content:"";border:50px solid rgba(255,255,255,0.5);position: absolute; top: 0;width: 300px;height: 100px;}
img{width: 100%;position:}
 <div class="outter_div">
       <img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/>
</div>

If you can change HTML to something like this:

<div id="holder">
  <div id="overlay">          
  <img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg"  />

    </div>    
    <div id="box"></box>  

</div>

CSS:

#holder {
    width:500px;
    height:250px;
    position:relative;
    overflow:hidden;

}

#overlay {
    width:500px;
    height:250px;
    opacity:0.5;

}
#displayimg {

    width:500px;
    height:250px;

}
#box {
    width:250px;
    height:100px;
    background-color:black;
     position:absolute;
    left:200px;
    top:70px;
    overflow:hidden;

}
#box #ima {

    position:absolute;
     width:500px;
    height:250px;
    display:block;
}

And little JQuery magic:

$('#box').append('<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="ima"  /> ');

$('#ima').offset($('#holder').offset());

$( "#box" ).draggable();

  $( "#box" ).draggable({

      drag: function() {
      $('#ima').offset($('#holder').offset());
      }

    });     

Since you have mentioned dragging, i have imported JQuery UI in fiddle: http://jsfiddle.net/y3c41d10/1/

For resizing, you will have to do some calculations, but it is doable, i hope...


This is what I came up with:

<div class="container">
    <div class="main">
        <div class="sub">This is a text</div>
    </div>
</div>


.main {
    background-image:url(http://lorempixel.com/g/200/200/);
    position: relative;
}
.container {
    width:300px;
    height:300px;
}
.sub {
    text-align: center;
    padding:15px;
    border: solid 30px rgba(255, 255, 255, 0.5);
    color:white;
}

Here is the JSFiddle demo


Need Your Help

Read data from file that has a string with each line and may or may not have an integer with it

c++ input cin

I have a project where we read data in from a file and use the commands to organize the data in a stack or queue depending on what the data wants us to do. How would I read this information from a ...

how to ignore particular child node when select the root node in xslt?

xml xslt xslt-2.0

current coding given in this picture, I want ignore the &lt;bookmeta&gt; content in output how is possible

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.