I have the following label:
<label for="payment_method_new">
New <img src="www.example.com/img.png"/>
</label>
What I would like to do is to only hide the text inside the label, but to display the image.
Any help or guidance is much appreciated.
You can use the visibility style for that.
First have your label's content hidden using hidden or collapse, then show your image using visible:
label[for="payment_method_new"]{
visbility: collapse;
}
label[for="payment_method_new"] img{
visibility: visible;
float: left;
}
JSFiddle
#hidet {
visibility: collapse;
}
#hidet img {
visibility: visible;
}
<label id='hidet' for="payment_method_new">
New
<img src="www.example.com/img.png" />
</label>
Is there any specific purpose of first writing text 'New' within your label and then hiding it?
There could be another way of retaining both image and text in your html code, still not showing the text -
<img src="www.example.com/img.png" alt="New" />
Related
Is there a way to make a text appear on an embed image?
[That text appears when the cursor hovers over the image]
https://css-tricks.com/text-blocks-over-image/
You can use the :hover selector in the css to make your text appear when the mouse hovers over the image
Without any examples, yes. Your image and text should be different entities, in that CSS should be able to reference them distinctly. Then you can just do something like this.
#your-text-elements-id:hover {
visibility: "visible"
}
#your-text-elements-id {
visibility: "hidden"
}
you can use the below code to make text appear on cursor hover the image
.texthover {
width:100%;
display:block;
position:relative;}
.texthover .overlay {
position:absolute;
top:25%;
height:50%;
padding:10px;
display:none;
}
.texthover:hover .overlay {
display:block;
}
<div class="texthover"><br />
<img src="https://lh3.googleusercontent.com/U2R2BfwOe-ZiqI1gSgmTpZPDkWBNacaO8_HZkKkVee-wHlHV505gmX91DZnq-dYbzY96" height="50%" width="50%"/>
<div class="overlay"><br />
<h1>Ashok Purohit</h1></div>
</div>
I searched on SO and Google and I couldn't find anything related. Is there any way I can hide the radio button next to an image (that is used as a label for it) but still keep its functionality when clicking on the label?
I have tried several methods but it seems that using display:none or visibility:hidden makes the radio function useless.
I have tried several methods but it seems that using display:none or visibility:hidden makes the radio function useless.
But it works. Maybe you didn't set for attribute:
<input id=radio1 name=testradios type=radio><label for=radio1>radio1</label>
<br>
<input id=radio2 name=testradios type=radio><label for=radio2>radio2</label>
#radio1 {
display: none;
}
OR
#radio1 {
visibility: hidden;
}
Both hide radio button but label is still clickable and checks its radiobutton.
http://jsfiddle.net/m0fbd75w/
In Angular, display:none or visibility:hidden didn't work for me.
Instead, I used:
input[type=radio] {
opacity: 0;
}
document.getElementById('myId').addEventListener('click', function() {
alert(this.checked);
})
label {
display: inline-block;
}
label:before {
content: '';
background: url('http://placehold.it/350x150') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
}
input {
display: none;
}
<input type="radio" id="myId">
<label for="myId"></label>
Just cover them with another div whose color matched with the background. This will hide the radio buttons and still your radio buttons will work on clicks of their labels. Hope that helps..
I'm working on a sidebar for my personal website and I'm looking to show/hide a Facebook follow button when visitors click on a Facebook icon. I am wondering if it is possible with stricly HTML/CSS and if not, what would be the easiest way to do it with JavaScript. I've seen many jQuery solutions around but I have yet to find a purely HTML/CSS one.
<div class="sidebar-follow">
<div class="sidebar-follow-icon">
<img src="/follow_facebook.jpg" alt="Follow on Facebook" height="32" width="160">
</div>
<div class="sidebar-follow-button">
This is the follow button.
</div>
</div>
Clicking on .sidebar-follow-icon should reveal .sidebar-follow-button and clicking again on .sidebar-follow-icon show hide .sidebar-follow-button.
Html
<label for="toggle-1"> Button </label>
<input type="checkbox" id="toggle-1">
<div class="facebook"> Facebook Content</div>
CSS
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
}
/* Default State */
.facebook {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ .facebook {
display: none;
}
fiddle Here And more About this csstricks
This is honestly not typically done in HTML / CSS. It's best suited for Javascript, JQuery, and the like.
But it got me thinking... is it possible.
And here's what I came up with that I think is the closest that you can get using pure CSS: http://jsfiddle.net/a92pkeqw/
My reasoning: the only element that can save it's 'state' is the checkbox. This is, therefore, the only element that can produce a toggling effect. Using the toggle and the ~ selector in CSS, it was possible to edit the styling of another element, in this case change the visibility property.
HTML:
<input type="checkbox" class="toggle"></input>
<div class="toggled">
Text that be hidden dynamically!
</div>
CSS:
input[type='checkbox']:checked ~ .toggled
{
visibility: hidden;
}
input[type='checkbox'] ~ .toggled
{
visibility: visible;
}
Using a check box it is possible, but I prefer to use javascript for interactivity.
#fbCheck {
display:none;
}
#fbCheck:not(:checked) ~ .sidebar-follow-button
{
display:none;
}
#fbCheck:checked ~ .sidebar-follow-button
{
display:block;
}
<div class="sidebar-follow">
<input type="checkbox" id="fbCheck" />
<label for="fbCheck">
<div class="sidebar-follow-icon">
<img src="/follow_facebook.jpg" alt="Follow on Facebook" height="32" width="160">
</div>
</label>
<div class="sidebar-follow-button">This is the follow button.</div>
</div>
On a side note, do you really want your users to be doing something with two clicks when it can be done with one?
We had a similar need for a CSS-only solution, and found that this works with these conditions: (1) the checkbox "button" and items to be toggled are all within the same overall container, such as body or div or p, and items to be toggled are not separated by being in a sub-container, and (2) the label and checkbox input must be defined ahead of the items to be toggled.
I think you can't do it without JavaScript.
The easy way (but not the best) is add the onclick attribute to the <div> tag.
This example use pure JS
JS
function toggleImage(){
var div = document.getElementsByClassName('sidebar-follow-icon')[0];
if (!div.style.display || div.style.display === 'block') div.style.display = 'none';
else div.style.display = 'block';
}
HTML
<div class="sidebar-follow">
<div class="sidebar-follow-icon">
<h1>a</h1>
</div>
<div class="sidebar-follow-button" onclick="toggleImage();">
This is the follow button.
</div>
</div>
*Is not a good practice attach javascript through the html, instead that you should attach the click event using the addEventListener function.
I'm working with a list of links that reveal an image when hovered.
However when the image is revealed and subsequently hidden a line break is left. Is there any way to avoid this?
Here are some images to show the exact problem:
Before: http://i38.photobucket.com/albums/e126/aaron123456/Screenshot2011-11-10at155956.png
After the images are revealed: http://i38.photobucket.com/albums/e126/aaron123456/Screenshot2011-11-10at160023.png
I'm pretty new to coding, any help you can give would be great.
thanks!
Try this: http://jsfiddle.net/csPw2/
html
<span id="hover_img">Hover!<img src="http://www.google.de/images/srpr/logo3w.png" alt="image" /></span>
<br />
Link1<br />
Link1<br />
...
css
#hover_img img {
display: none;
}
#hover_img:hover img {
display: block;
}
#hover_img:hover + br {
display:none;
}
I want to use pretty 3d button images on my website. However, currently the way this works is the text is part of the image.
So, when I want to change the text (or make a new button) it's a 10 minute editing chore instead of a 20 second text change.
I've seen a few websites that have a blank button with text on it.
The real trick is making the entire image clickable. I've been able to make the link inside an image visible but that's a poor UI. Users will expect to click the button anywhere and failure to behave that way will frustrate them.
It seems like they're wrapping a .DIV tag with an image background around a Hyperlink.
<Div (class w/ image>
<a> text
</a>
EXAMPLE:
https://www.box.net/signup/g
Anyone have any insight or explanation of how this works?'
CODE SAMPLE
<a href="#" class="button" style="position: relative;left:-5px;"
onmousedown="return false;"
onclick="document.forms['register_form'].submit(); return false;">
<span>
My text
</span>
</a>
Make the button a background image:
<style>
div.button a {
display: block;
width: /* image width */;
line-height: /* image height */;
text-align: center;
background: url(/* image uri */) no-repeat;
}
</style>
Would setting your anchor to display:block and giving it a height/width equal to your div/background image help you?
perhaps something like
a {
width: something ;
height: something;
display: block;
background: url('hi.png');
}
also,
input { background: url('hi.png'); }
is an alternative
Your example is just placing CSS styles on the a tag...
From there:
The tag:
<a onclick="document.forms['register_form'].submit(); return false;"
onmousedown="return false;" style="position: relative; left: -5px;"
class="button" href="#">
<span>Continue</span>
</a>
Note that they are using JS for some reason, and not using the href, I don't like that.
Then, the button class:
a.button
{
background:transparent url(../img/greenbutton2.gif) no-repeat scroll left top;
font-size:16px;
height:42px;
line-height:42px;
width:155px;
}
This is just how that site you linked to did it.
I found this rather impressing. Using GWT to style hyperlinks.