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>
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 to make a chat box for my website and it should be fixed at the bottom right position of page. When someone clicks on it that it should slide up and details are visible in it.
I am using html,css,jquery.
Suggest help from these only.
You can look at examples of socket.io for chat.
https://socket.io/get-started/chat/
Desing:
https://codepen.io/oktaykose/pen/aypyvg
.chat-box{
position: absolute;
bottom: 0;
right: 0;
}
.box{
transition: height 1s ease-out;
width: 300px;
height: 0px;
background: red;
z-index: 9999;
}
.open:hover>.box{
height:400px;
transition: height 1s ease-out;
}
.open {
text-align: center;
font-size: 20px;
border: 2px solid #3F51B5;
background: #673AB7;
color: #eaeaea;
}
<div class="chat-box">
<div class="open">Open
<div class="box">
<br>
Test
<br>
</div>
<div>
<div>
Below is the sample as per your requirement.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.LiveChat{
position:absolute;
bottom:0%;
height:10%;
background-color:red;
}
</style>
<script>
$(document).ready(function()
{
$("#chatBtn").click(function()
{
$(".LiveChat").css("height","30%");
});
});
</script>
</head>
<body>
<div class="LiveChat">
<button id="chatBtn">Live chat</button>
<p>rest of details below</p>
</div>
</body>
</html>
Please mark it as answer if its matching your need.
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
I'm trying to make a Tumblr page. The idea is to have several book titles listed on the left side that, when hovered over, display the information for said book on the right side.
Example
There, "Example 2" is being hovered over in the blue box, so its respective information appears in the red box on the right. If I were to hover over "Example 3" from there, the information box for "Example 2" would fade out while the one for "Example 3" would fade in. I hope I'm make some sort of sense here.
Now, I know I could achieve this with pure CSS, but I imagine that would involve creating a custom CSS class for each title in the list. Is there any other way of potentially doing this while avoiding the CSS dance?
Pure CSS, one class for all titles - Codepen
HTML
<div class="menu">
Example 1
<div class="show">
<h1>EXAMPLE 1</h1>
<hr>
<p>text here</p>
</div>
Example 2
<div class="show">
<h1>EXAMPLE 2</h1>
<hr>
<p>text here</p>
</div>
Example 3
<div class="show">
<h1>EXAMPLE 3</h1>
<hr>
<p>text here</p>
</div>
Example 4
<div class="show">
<h1>EXAMPLE 4</h1>
<hr>
<p>text here</p>
</div>
</div>
CSS
body, html {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.menu {
width: 120px;
height: 300px;
background-color: #2F43B7;
}
.menu a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.menu a:hover + .show { /* Select .show that is immediately after a */
opacity: 1;
}
.show {
transition: 500ms;
opacity: 0;
background-color: #B72F2F;
position: absolute;
top: 0;
left: 130px;
width: 400px;
height: 300px;
text-align: center;
}
.show h1 {
font-size: 46px;
margin-bottom: 0;
}
.show h1,
.show p {
color: #fff;
}
.show hr {
width: 90%;
border: 2px solid #000;
}
Same effect with jQuery:
$(".show").css("opacity", 0);
$("a").hover(
function(){
$(this).next(".show").stop().fadeTo("slow",1);
},
function(){
$(this).next(".show").stop().fadeTo("slow",0);
});
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.
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;
}
hi i was just wondering how you can create you own custom file upload button, because the best i can do is
and what i want to achieve is
if there is anyway of doing this i would be very thankful,
and please can i have answers that explain how to do it with code and not answers with links to websites that allow you to download a button or something like that,Thank You :)
Although some of these answers will create something that looks like you want it to work, they will break down when they try to perform the way that you expect. The file input doesn't style well directly and you will have trouble trying it. However, there is a trick.
The trick is to turn the opacity of the input to 0 and then change the background underneath it to the button style that you want.
.file_button_container,
.file_button_container input {
height: 47px;
width: 263px;
}
.file_button_container {
background: transparent url(http://i.stack.imgur.com/BT5AB.png) left top no-repeat;
}
.file_button_container input {
opacity: 0;
}
<div class="file_button_container"><input type="file" /></div>
I think you can also try doing it this way:
Creating an additional <label for="X"></label> element which you can style easily with CSS
<div class="container">
<label for="upload" class="uploadButton">Upload</label>
<input type="file" name="upload" id="upload">
</div>
like
.container {
position: relative;
}
.uploadButton {
height: 25px;
width: 66px;
display: block;
cursor: pointer;
background: url('http://www.ifunia.com/images/christmas/youtube-upload-button.gif') center center no-repeat;
}
input[type="file"] {
display: block;
width: 66px;
height: 25px;
clip: rect(0px 0px 0px 0px);
position: absolute;
left: 0;
top: 0;
}
<form>
<div class="container">
<label for="upload" class="uploadButton"></label>
<input type="file" name="upload" id="upload" required />
</div>
<hr/>
<button type="submit">Submit</button>
</form>
The arrow isn't something you can "just do with code" and the rounded corners would work fine in firefox, but not in ie using css... if you just need to use a custom image it's easy:
css:
#my_upload_button{
background-image:url(path-to-file.png);
border:none;
}
In Vue JS
If you wanna put the upload image button inside the textarea
use Relative and Absolute position to put the camera icon inside the textarea
use bottom-3 right-4 to find the proper position
<div class="field relative">
<label>Description</label>
<textarea class="textarea" v-model="description" type="text" maxlength="10000"> </textarea>
<label for="upload-file" class="icn icn-camera cursor-pointer absolute bottom-3 right-4">
<input type="file" id="upload-file" hidden ref="file" #change="getImage($event)" accept="image/**" />
</label>
</div>
if not inside the textarea box, just one custom upload button then just keep the code like this
<label for="upload-file" class="icn icn-camera cursor-pointer">
<input type="file" id="upload-file" hidden ref="file" #change="getImage($event)" accept="image/**" />
</label>
change the default upload file icon to a camera icon
Step 1. Create a simple html markup
<div class="fileUpload btn btn-primary">
<span>Upload</span>
<input type="file" class="upload" />
</div>
Step 2. CSS: Tricky Part
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
For demo see here http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
Use the input's label as custom upload button:
<label for="pic" class="uploadfilelabel" >upload </label>
<input type="hidden" name="MAX_FILE_SIZE" value="110000">
<input id="pic" name="pic" type="file" size="110000">
and CSS:
label.uploadfilelabel{/*custom label here*/}
input[type=file]{display:none;}
Notice that we did not display the main input button, because otherwise it will occupy space
I'm too late to answer but someone surely will find this useful in future, no need to use of Javascript or Hidden field too. If you are using Bootstrap then definitely there's no need of btn CSS as well.
#upload_file
{
display: none;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
color: #fff;
}
.btn {
-moz-user-select: none;
border: 1px solid transparent;
border-radius: 0.25rem;
display: inline-block;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
padding: 0.375rem 0.75rem;
text-align: center;
transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
vertical-align: middle;
white-space: nowrap;
}
<label for="upload_file" class="custom-file-upload btn btn-primary"><i class="fa fa-cloud-upload"></i> File Upload</label>
<input class="margin" type="file" formnovalidate id="upload_file" name="file" accept="*">
Here is an approximation to the button you want with css/html
html
<button class="upload">Choose a file to upload...</button>
css
.upload{
border:0;
padding:10px 20px;
-moz-border-radius:10px;
border-radius:10px;
background-color:#4488ee;
color:white;
font-size:16px;
}
demo http://jsfiddle.net/gaby/qdX5d/2/
for rounded corners in pre-IE9 use css3pie