Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
For the moment, my application only uses simple checkboxes with label. Our app designer wants us to change this into clickable images which works like checkbox.
Here an example:
I have no idea how to proceed, should i try to create a div (the square) filled with the image and then set my current checkbox in the bottom right corner of that div ?
Or maybe there's a simplier way to do it ?
http://jsfiddle.net/pwoojpv1/
HTML
<div class="check-img" style="width:100px;height:100px;">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/883px-Tux.svg.png" >
<div class="check">✓</div>
</div>
CSS
*{
box-sizing:border-box;
}
.check-img{
position:relative;
top:0px;
left:0px;
}
.check-img img{
border:solid 2px gray;
width:100%;
height:100%;
cursor:pointer;
}
.check{
padding-left:5px;
color:grey;
height:20px;
width:20px;
background:grey;
position:absolute;
bottom:0px;
right:0px;
}
.check-img.checked img{
border-color:orange;
}
.check-img.checked .check{
background:orange;
color:white;
}
JS
$(document).ready(function(){
$(".check-img").click(function(){
$(this).toggleClass("checked");
});
});
Put the <img> inside a <label> element that's tied to the checkbox <input> element's id. So when you click on the label (the image), it's the same as clicking on the checkbox. Then wrap the <input> and the <label> inside a <div> so you can position the checkbox on the bottom right corner.
HTML:
<div class="container">
<input id="checkbox1" type="checkbox" />
<label for="checkbox1">
<img src="http://i.imgur.com/rpUZ96Y.jpg" />
</label>
</div>
<div class="container">
<input id="checkbox2" type="checkbox" />
<label for="checkbox2">
<img src="http://i.imgur.com/fKRGSmS.jpg" />
</label>
</div>
CSS:
.container {
display: inline-block;
font-size: 0;
position: relative;
}
.container input {
bottom: 0;
position: absolute;
right: 0;
}
Here's a fiddle.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want when I click the image then showing big size image for me, like this demo.
This is my image code. And please make in one html file, because this is just a webview by html editor, so no js and css file, please.
<p>
<img src="http://myServerName.com/assets/newsImage/纳吉.jpg" style="width:100%" />
</p>
UPDATE:
input[type=checkbox] {
display: none;
}
.layout img {
margin: 100px;
transition: transform 0.25s ease;
cursor: zoom-in;
}
input[type=checkbox]:checked ~ label > img {
transform: scale(2);
cursor: zoom-out;
}
<div class="layout">
<input type="checkbox" id="zoomCheck">
<label for="zoomCheck">
<img src="http://myServer.com/assets/newsImage/纳吉.jpg" style="width:100%" />
</label>
</div>
Try this method may hope it will work for you
input[type=checkbox] {
display: none;
}
.layout img {
margin: 100px;
transition: transform 0.25s ease;
cursor: zoom-in;
}
input[type=checkbox]:checked ~ label > img {
transform: scale(2);
cursor: zoom-out;
}
<div class="layout">
<input type="checkbox" id="zoomCheck">
<label for="zoomCheck">
<img src="https://placehold.it/200">
</label>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
somebody know a js/css libary, or a keyword how it is called? I'm searching for a while for that button select element like digital ocean, see picture :-)
Where I can click and they got selected and so on, I think it is pretty nice
First of all it's not a button. It can be a simple div or a list element. Here is a sample code.
You can add content into each li element to emulate the required list. You can also use div or `span' for the same purpose.
$(".button-container li").click(function(){
console.log("list");
$(this).addClass("selected").siblings().removeClass("selected");
});
.button-container li {
list-style-type: none;
display: inline-block;
width: 150px;
border: 2px solid #f1f1f1;
border-radius:5px;
min-height: 100px;
margin: 0px;
box-sizing: border-box;
font-size: 1.3em;
text-align: center;
vertical-align: top;
position:relative;
margin:10px;
}
li.selected
{
background:#4183D7;
color:white;
border:2px solid #4183D7;
}
span
{
display:block;
color:#444;
height:30px;
width:100%;
background:white;
font-size:10px;
position:absolute;
bottom:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="button-container">
<li>some content
<span>
Some other content
</span>
</li>
<li>some content
<span>
Some other content
</span>
</li>
<li>some content
<span>
Some other content
</span>
</li>
<li>some content
<span>
Some other content
</span>
</li>
<li>some content
<span>
Some other content
</span>
</li>
</ul>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I trying to make a slide up panel the reveals a hidden menu with css/jquery If you look at this link http://www.responsivefilemanager.com/filemanager/dialog.php you will notice that when you hover over the file, a hidden menu is revealed. Can someone give me an example as to how I can accomplish this?
Try This.
http://jsfiddle.net/aqm7kjbg/2/
HTML
<div class="main">
<div class ="samp1">
Content
</div>
<div class="description">
Description
</div>
<div class="icon">
Icon
</div>
</div>
CSS
.main{
width:100%;
height:140px;
}
.samp1{
background-color:grey;
padding:10px 10px 20px 10px;
}
.description{
position:absolute;
background-color:red;
width:97.1%;
}
.icon{
background-color:blue;
}
JQUERY
$('.main').hover(function(){
$('.description').animate({'margin-top': '-18px'}, 500);
}, function(){
$('.description').animate({'margin-top': '0px'}, 500);
})
Demo
HTML
<br/><br/><br/>
<div class="container-two-div">
<div class="contain-things back">
Back
</div>
<div class="contain-things front">
File
</div>
</div>
CSS
.container-two-div , .contain-things
{
height:50px;
max-height:50px;
min-height:50px;
overflow:visible;
background-color:gray;
width:100px;
}
.front
{
position:relative;
top:-50px;
transition: all 1s; /* transition when the mouse over */
background-color:red;
color:white;
}
.container-two-div:hover .front
{
top:-100px;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Using Photoshop I can make this effect. My question is how can I achieve this through CSS?
Thank you.
Use a figure tag, and inside place a figure caption element with position absolute, this should be the correct semantic way of doing it.
Depending on your site you'll use ids or clases to target these elements
http://jsfiddle.net/MPB4H/
html
<figure>
<img src="http://i.stack.imgur.com/ejI6T.png"/>
<figcaption>
Here comes your text
</figcaption>
</figure>
Css:
figure{
position:relative;
}
figcaption{
position: absolute;
display: block;
bottom: 65px;
width: 100%;
background-color: rgba(255,255,255,0.7);
color: red;
text-align: center;
font-weight: bold;
}
Your HTML will look like this:
<div class="containter>
<img class="image" src="car.jpg" />
<div class="text>here goes your text</div>
</div>
And here is your CSS:
.container { position: relative; }
.containter .image { position: absolute; z-index: 1;}
.containter .text { position: absolute; z-index: 2; left: 0; bottom: 20px; }
Ask me if you don'g get why I wrote those lines.
Check this out.
Fiddle
HTML
<div class="img-container">
<img src="http://i.stack.imgur.com/ejI6T.png" />
<span class="caption">Here goes text and text and text so on.........</span>
</div>
CSS
.img-container{
width:100%;
position:relative;
}
.img-container img{
width:100%;
}
.caption{
width:100%;
background:rgba(255,255,255,0.8);
color:#CF0943;
position:absolute;
bottom:40%;
font-weight:bold;
padding:5px;
font-family:"Calibri";
font-size:18px;
text-indent:80px;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am not sure why the last image 6.png is selected, when all the images are direct descendants of the div shape. Thanks for your help its much appreciated.
From what I understand it should select all the divs because they are all direct descendants of the div #shape.
<!DOCTYPE html>
<html>
<head>
<title>3D image</title>
<style>
body,html{
width:100%;
height:100%;
overflow:hidden;
}
body{
background:-webkit-gradient(radial,800
64,950, 500, 400, 40, from(#1F1F1F), to(#FFFFFF));
}
#container{
width:100%;
}
#shape{
position:relative;
top:160px;
margin: 0 auto;
width:200px;
height:200px;
}
#shape > div{
position:absolute;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="shape">
<div class="one"><img src="images/2.png"></div>
<div class="two"><img src="images/3.png"></div>
<div class="three"><img src="images/4.png"></div>
<div class="four"><img src="images/1.png"></div>
<div class="five"><img src="images/5.png"></div>
<div class="six"><img src="images/6.png"></div>
</div>
</div>
</body>
</html>
All of them are selected.
They are overlapping eachother, as in they all have the same position.
Replace
#shape > div{
position:absolute;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
for
#shape > div{
position:relative;
float: left;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
And you should see the difference.