I'm using a <span class="image"> with a background:
.image {
background-image: url("image.jpg")
}
How can I also add a hint on this image when people put the mouse over it?
Is there a CSS way to achieve this?
Use the HTML title attribute:
<span class="image" title="This is a hint.">
You can do something with :after content:
.image:hover:after {
content:"This is a hint";
}
Demo: http://jsfiddle.net/fXuSB/
However, this content is probably better off in the HTML (and your image actually might be as well). You can use the title attribute for a simple default tooltip, or perhaps something like this:
<span class="image">
<span class="hint">This is a hint</span>
</span>
.image .hint {
display:none;
}
.image:hover .hint {
display:block;
}
Demo: http://jsfiddle.net/fXuSB/1/
Related
I have a image tag like,
<img src="image/path/goes/here/random_id">
and the random_id is changing randomly. How to catch this tag from an external css file without using id,class or any other attribute.
You can use path contains selector on src attribute
acording to this
https://www.w3schools.com/cssref/sel_attr_contain.asp
img[src*="image/path/goes/here/"]{
border:1px solid red;
min-width:50px;
min-height:50px;
}
<img src="image/path/goes/here/123">
<img src="image/path/goes/here/321">
<img src="this/is/another/path/321">
I don't know what you are aiming to . However this is the solution you asked for (I suggest to give a style using jQuery selector as it seems you are using dynamic IDs .
img[src="hello/world/123"]{
border:10px solid red;
}
<img src="hello/world/123">
You can put it in a div tag and the reference it as a child.
<div>
<img src="your_path/path">
</div>
Then in CSS..
div:first-child {
do css here...
}
I need to display ex: $300.00, but I need the dollar sign to be displayed smaller than the number so its going to look like a trademark, but not that small.
Is there a CSS function that does that?
Thank you in advance.
Could be something like this?
HTML:
<span class="dollar">300.00</span>
CSS:
.dollar:before {
content: '$';
font-size: somethingSmaller;
}
See this fiddle and let me know if this helps.
But only if not empty!
.currency:not(:empty):before {
top: 0;
content: "$";
}
<span class="currency">10.5</span><br />
<span class="currency"></span><br />
<span class="currency">42</span><br />
Use a <span> element to style in-line text:
HTML:
<span class="currency">$</span>
<span class="price">300</span>
CSS:
.currency{
font-size:.5em;
vertical-align:text-top; /* resembling more the tm symbol you mentioned */
}
A fiddle for convenience...
The difference from lante's answer is that this will work in much older browsers as well. For more info, see the support for :before and :after pseudo elements.
Use the :before pseudo selector
.amount:before {
content: "$";
font-size:.9em;
}
A very simple way to do this would be :
HTML :
<div class="text">
<span class="dollar">$</span>300
</div>
CSS :
.text {
font-size: 18px;
}
.dollar {
font-size:15px;
}
See here->http://jsfiddle.net/xMKsH/
However, if you understand pseudo-selectors well, you would be better off using this:
HTML:
<div class="text">300</div>
CSS:
.text {
font-size: 18px;
}
.dollar:before {
content:'$';
font-size:15px;
}
See here->http://jsfiddle.net/xMKsH/1/
Hope this helps!!
If you really must do this, use
<small>$</small>300.00
and, if desired, set the size of small in CSS, e.g.
small { font-size: 75% }
I am facing very annoying problem.
I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image.
It does work, but when image is hovered, overlay doesnt stop flickering.
I tried few "hacks" by setting opacity and nothing works.
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
URL is http://jsfiddle.net/MZ3eE/
I know JS could be used, but in this case i need pure CSS solution.
After looking at the new fiddle
you need to do this
.product-container:hover .overlay-box {
display: block;
}
instead of
.product-img-box:hover + .overlay-box {
display: block;
}
http://jsfiddle.net/avxLA/1/
Apply the :hover to the .product-image div instead of the img like so:
.product-image:hover .overlay {
display:block;
}
updated fiddle
For starters, there is an unclosed <div> there, so not quite sure how you want it. Anyway if you want it like this:
<div class="product-container">
<div class="product-image">
<img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
</div>
then like others said :
.product-image:hover .overlay {display:block;}
will do fine. Otherwise if you want it like that(which makes more sense tbh):
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200"></div>
<div class="overlay">PRICE</div>
</div>
you should put it on the containers :hover like that :
.product-container:hover .overlay {display:block;}
I've been a bit confusing on how to do so...
This is my code:
<div class="game_grid">
<center><div id="game_name"><?php echo $game_name; ?><br /></div></center>
<div id="game_image"><img src="images/games_images/<?php echo $game_image; ?>" width="120" height="120" /></div>
</div>
I failed to use "text-decoration:underline;" to make the title (game_name) underline when I put my mouse over the game image...
Any idea?
I do not know what is needed and what not in your HTML, so I'll just show a few examples, take a pick.
For example a simple build: http://jsfiddle.net/B6gD4/
Maybe style the image: http://jsfiddle.net/B6gD4/1/
And finally your IDs added if necessary for anything other than styling: http://jsfiddle.net/B6gD4/2/
Simple HTML:
<div class="game_grid">
<a href="game_page.php?id=1">
<img id="game_img" src="images/games_images/<?php echo $game_image; ?>" width="120" height="120" />
<span id="game_name">Title</span>
</a>
</div>
CSS:
.game_grid {
text-align: center;
}
.game_grid a {
text-decoration:none;
}
.game_grid a:hover {
text-decoration:underline;
}
.game_grid img {
/* any styles */
}
.game_grid span {
display:block;
font-weight: bold;
}
You can add your div styles to the respective game_grid span or game_grid img, keeping the same look but shortening your HTML by 50%.
There are alot of elements in between them. So CSS won't be easy to do that, you can try out jQuery for this:
$('#game_image').hover(function () {
$('#game_name').css('text-decoration', 'underline');
}
CSS would have been possible if they were siblings of the same parent element. Then you would have used:
#game_image:hover + #game_name {
text-decoration: underline;
}
If the name was the direct child of the image element (which is not possible although) then you would have used > child selector. But at this stage, you should use jQuery to query among the elements.
I have a grey facebook icon and a full colour facebook icon. I would like to have them on my website so that when the mouse cursor is placed over the grey icon it becomes the full colour one. How do I achieve this?
Use CSS sprites and shift position based on CSS class for element and element:hover.
Old question, new answer with an old link:
http://webdesignerwall.com/tutorials/html5-grayscale-image-hover shows a solution with jQuery, which doesn't need 2 images (so it saves time and resorces if you want to do a larger gallery)
you need to have 2 versions from the Icon, one grey and another colored, and on hover, switch:
icon
{
background-image: greyIconURL
}
icon:hover
{
background-image: coloredIconURL
}
another way and better is #Kon solution
It can be done through the filter in css.
example
/* needed code */
.employee:hover img {
filter: none;
-webkit-filter: grayscale(0);
-webkit-transform: scale(1.01);
}
.employee img {
filter: gray;
-webkit-filter: grayscale(1);
transition: all .8s ease-in-out;
width: 100%; }
/* style col -- no need */
.row {
display:flex;
}
.col-md-3{
padding:5px;
width:25%;
}
<div class="row ourTeam">
<div class="col-md-3 col-12 q-pa-md employee">
<img src="https://placeimg.com/640/480/any">
<h6>Name</h6>
<span>CEO</span>
</div>
<div class="col-md-3 col-12 q-pa-md employee">
<img src="https://placeimg.com/640/480/any">
<h6>Name</h6>
<span>CEO</span>
</div>
<div class="col-md-3 col-12 q-pa-md employee">
<img src="https://placeimg.com/640/480/any">
<h6>Name</h6>
<span>CEO</span>
</div>
<div class="col-md-3 col-12 q-pa-md employee">
<img src="https://placeimg.com/640/480/any">
<h6>Name</h6>
<span>CEO</span>
</div>
</div>
that easy!
<img src="grey.png" onmouseover="this.src='blue.png'" onmouseout="this.src='greay.png'" />
EDIT use this instead of you wish to be following rules but increasing complexities and KBs
HTML
<img id="yourImage" />
JS
document.getElementsByTagNames('body')[0].addEventListener('load', function() {
document.getElementById('yourImage').addEventListener('mouseover', function() {
document.getElementById('yourImage').src = 'color.jpg'
}, false);
document.getElementById('yourImage').addEventListener('mouseout', function() {
document.getElementById('yourImage').src = 'grey.jpg'
}, false);
}, false);
PS this uses javascript as opposed to your css tag simply because it is a good practice to use image tag wherever possible because browsers will image as an image as opposed to a div tag where they will treat it as a content block (which is not good!).