My goal is to overlay a transparent button on a div. When a user clicks the button, the underlying div should change color. I tried using z-index, but the button is not clickable. Are there any additional CSS properties I could try that would help me achieve the desired functionality?
CSS:
#container{
height:200px;
width:200px;
position:relative;
z-index:auto;
}
#MyHiddenButton{
float:left;
height:100px;
width:200px;
z-index:2;
background-color:transparent;
position: absolute;
top: 0;
outline: none;
border: none;
}
#myContent{
position:absolute;
float:left;
height:200px;
width:200px;
background-color:lightslategrey;
z-index:1;
}
HTML:
<div id="container">
<div id="myContent" runat="server"></div>
<asp:Button ID="MyHiddenButton" runat="server" OnClick="MyHiddenButton_Click" />
</div>
C# Code:
protected void MyHiddenButton_Click(object sender, EventArgs e)
{
myContent.Style.Add("background-color", "red");
}
If you're not opposed to using JQuery, you can just skip the hidden button and make the div clickable
$('#myContent').click(function(){
$('#myContent').css('background-color','red');
});
JSFiddle
Related
i have a ribbon on bottom of every report page with an image for call window.print().
i figure out it like this:
<div id="dgdPrint" class="hop">
<div id="dgdPrnImg" title="Print Report..." onclick="window.print();">
</div>
</div>
and i style it with:
#dgdPrint
{ position:fixed;
border-top:1px solid #000;
width:100%;
bottom:0;
right:0;
text-align:center;
height:55px;
margin-top:50px;
background-color:#88A7DB; }
#dgdPrnImg
{ margin-top:10px;
background-image:url('PrinterText.png');
background-position:center center;
background-repeat:no-repeat;
height:35px; }
#dgdPrnImg:hover
{ background-image:url('PrinterText-hover.png'); }
but whole of first div (ribbon) take this effect and on hover of any part of that the image is changed. what's wrong in my code?
It changes because you have background-image:url('PrinterText-hover.png'); } set under #dgdPrnImg:hover
Hello i have been trying a lot to do the pop-up image effect using CSS and CSS3 but the result is nothing i don't know what is the problem, i think it's because of the pseudo-classes don't work with me like (visited,actived and focus etc..) just hover works with me so could anybody help me solve this problem?
what i mean by pop-up image effect is : you know when clicking on an image on Facebook that image is popped up with it's real size and the background is become a little bit more dark?
By the way does anyone know what is the problem with the pseudo-classes why they don't work with me?
thanks
<style type="text/css">
.pop{
border: 1px solid #000 ;
border-radius: 15%;
width: 200px;
height: 200px;
}
.pop:active{
width:500px ;
height:500px;
position:relative;
right: -65px;
top: 200px ;
background-color:#000;
}
<img class='pop' src="C:/Users/mohammad ghazi/Desktop/Xhtml folder/friends.jpg" alt="" />
What you are looking for is called a lightbox. Their are many good tutorials on how to make a pure css one, here is a few of them:
http://andornagy.com/pure-css-image-lightbox/
http://www.designcouch.com/home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/
http://www.thecssninja.com/xhtml/futurebox
The problem with using :target as a CSS click event is that it has some downsides such as page jumps or browser history.
You can avoid the downsides of :target by using the checkbox hack:
Make a checkbox and hide it:
<input type="checkbox" id="check" style="display:none;">
Then, make the image you want to have a lightbox for, and wrap it in a <label>
<label for="check">
<img src="http://lorempixel.com/400/400/" width="200">
</label>
Now, write the HTML for the lightbox:
<label for="check">
<div id="cover">
<div id="box">
<img src="http://lorempixel.com/400/400/" width="400">
</div>
</div>
</label>
And now, for the CSS magic!
Create the lightbox css:
#cover{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.5);
display:none;
}
#box{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:400px;
height:400px;
border:10px solid white;
}
This creates and centers the lightbox.
Now you need to add the click event:
#check:checked ~ label #cover{
display:block;
}
This CSS means, If #check is checked (:checked selector), find the sibling (~) with a id of #cover inside a label element and apply the rule to it.
That's it!
Your coding should look like this:
<input type="checkbox" id="check" style="display:none;">
<label for="check">
<img src="http://lorempixel.com/400/400/" width="200">
</label>
<label for="check">
<div id="cover">
<div id="box">
<img src="http://lorempixel.com/400/400/" width="400">
</div>
</div>
</label>
And CSS:
#check:checked ~ label #cover{
display:block;
}
#cover{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.5);
display:none;
}
#box{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:400px;
height:400px;
border:10px solid white;
}
SEE THIS JSFIDDLE
I think what you're going for is definitely javascript or Jquery. here is a JSFiddle which shows what i'm on about.
HTML:
<img src="http://0.s3.envato.com/files/19320511/Scenery%2080x80%20Avatar.png"/>
<div id="divLargerImage"></div>
<div id="divOverlay"></div>
JQuery:
$('a img').click(function () {
var $img = $(this);
$('#divLargerImage').html($img.clone().height(250).width(250)).add($('#divOverlay')).fadeIn();
});
$('#divLargerImage').add($('#divOverlay')).click(function () {
$('#divLargerImage').add($('#divOverlay')).fadeOut(function () {
$('#divLargerImage').empty();
});
});
CSS:
#divLargerImage
{
display: none;
width: 250px;
height: 250px;
position: absolute;
top: 35%;
left: 35%;
z-index: 99;
}
#divOverlay
{
display: none;
position: absolute;
top: 0;
left: 0;
background-color: #CCC;
opacity: 0.5;
width: 100%;
height: 100%;
z-index: 98;
}
There are many ways to do this, but most easy way to do this is you can use lighbox tools like: FancyBox, Colorbox plugins etc.
Fancy Box: http://fancybox.net
Color Box: http://www.jacklmoore.com/colorbox/
Alternatively you can use: jQuery Lightbox Generator
jQuery Lightbox Generator: http://visuallightbox.com/
For the problem with pseudo-classes, what i got from your question is you want to enlarge image?
Check this Jsfiddle:
` http://jsfiddle.net/23zgvg1f/1/ `
I hope this helps :)
I have been working with several solutions on the web and have not found anything that works.
I am trying to do something that should be simple. I am trying to have an image of a "button" underneath an actual button. When I do this, the image always overlaps the button itself.
HTML:
<div id="button"> <!-- Container for my image and button -->
<img src="C:\Users\Hansen\Desktop\Websigte\Images\buttonUnclicked.png" />
<input type="button" value="Roofing" onclick="createImageRoof();" style="position: absolute"/>
</div>
CSS:
#button {
height:30px;
padding:3px;
position:relative;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
Instead of using an actual image (which you won't be able to put behind anything), just make it a background image.
CSS:
#button {
height:30px;
padding:3px;
position:relative;
background: url('file:///C:/Users/Hansen/Desktop/Websigte/Images/buttonUnclicked.png');
background-repeat: no-repeat;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
jsBin demo
Use a background image for #button if you want
<div id="button">
<input type="button" value="Roofing"/>
</div>
CSS:
#button {
width:90px;
height:30px;
padding:3px;
position:relative;
background: url(Images\buttonUnclicked.png);
}
#button > input {
position:absolute;
left:5px;
top:6px;
width: 86px;
}
If you adjust the number for the left and the top in the CSS, you can move your picture around. I called the picture #myImage in the HTML. Hope that helps.
CSS
#myImage{
position:absolute;
left:10px;
top:50px;
}
#button {
height:30px;
padding:3px;
position:relative;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
html
<div id="button"> <!-- Container for my image and button -->
<img id="myImage" src="C:\Users\Hansen\Desktop\Websigte\Images\buttonUnclicked.png" />
<input type="button" value="Roofing" onclick="createImageRoof();" style="position: absolute"/>
</div>
Strange issue here which I can't see the problem with! I'm setting the width of the entire element using the class sale_container. But it's width is not changing at all!
See JSFiddle Demo
CSS:
/*Sale styles*/
.add_sales input {
background:none;
border:none;
color:#FFF;
}
.sales_toolbar input {
width:30px;
}
.sale_container {
width:500px;
border:2px solid #FFF;
}
.sale_image {
height:200px;
width:200px;
background-size:cover;
border-radius:10px;
}
.sale_image_container {
border:solid #000 1px;
float:left;
border-radius:10px;
background-color:#353535;
}
.sale_image_container p {
margin:10px;
}
.sales_toolbar {
float:right;
}
HTML:
<form class="add_sales" name="add_sales" action="php/process_sales.php" method="post">
<div class="sale_container">
<div class="sale_image_container">
<div style="background-image:url(data/images/20140121/0/image8.jpg)" class="sale_image"></div>
<p>KR</p>
</div>
<div class="sales_toolbar">
<input type="text" readonly value="KRR" id="50_selected" /> <!-- Selected -->
</div>
</div>
</form>
It seems to be working on the JSFiddle, but when I preview it in Chrome, it looks like this:
It's possible that additional styles are being included from an alternate CSS source. Have you tried using Inspect Element to view the div, and see if it has any unexpected styles being applied? Chrome natively has the feature built-in if you right-click any element.
Glad to help.
Set position to absolute of sale_container to change width.
.sale_container{
width: 300px;
position: absolute;
border: 2px solid #E97676;
}
Use firebug (http://getfirebug.com/) to inspect html element and css attributes.
I have a simple textbox inside a div, and I want a hover rule to apply when hovering over the div but not the textbox.
Code:
<div id="div1" style="display:inline-block; border:1px solid #777777; padding:16px; background-color:#eeeeee;">
<input type="text" name="txt1" id="txt1" />
</div>
#div1:hover {
background-color:#ffffff !important;
cursor:pointer;
}
JSFiddle
When hovering over the textbox, the div's hover rule must not apply. Is there a way to do this without JavaScript?
Is this what you are looking for..? Please see the fiddle.
HTML
<div id="container" >
<div id="div1" style="">
</div>
<input type="text" name="txt1" id="txt1" />
</div>
CSS
#div1:hover{
background-color:red !important;
cursor:pointer;
}
#container{
position:absolute;
}
#div1{
position:absolute;
display:block;
border:1px solid #777777;
padding:16px;
width: 180px;
background-color:#eeeeee;
}
#txt1{
top:5px;
left:5px;
background-color:white !important;
position:absolute;
}
http://jsfiddle.net/8NRNQ/4/
Is this what you are looking for?
#div1 { display:inline-block;
border:1px solid #777777;
padding:16px;
background-color:#eeeeee;
}
#div1:hover {
background-color:red;
cursor:pointer;
}
Testing Fiddle: http://jsfiddle.net/8NRNQ/3/
I think you need one simple line of JS for that. The problem is, that you can't change the background of the containing div with hover over the input just by CSS. But in jQuery for example, this is pretty easy
$('#div1 input').hover(function(){$(this).parent.css(SET BACKGROUND AND CURSOR BACK TO THE NO-HOVER-STYLE)});
For anyone wondering, I ended up using JavaScript:
$('#div1').mouseover(function () {
var el = $(this).find('input');
if (!(el.hasClass('inputishover'))) {
$(this).addClass('divhover');
}
}).mouseout(function () {
$(this).removeClass('divhover');
});
$('#div1 input').mouseover(function () {
$(this).addClass('inputishover');
}).mouseout(function () {
$(this).removeClass('inputishover');
});
JSFiddle