I have a small thumbnail image that I wish to change when the mouse rolls over it. I was wondering if there was a way to do this without swapping images on the rollover. For example, through CSS could I have the opacity change on rollover? If you have any other ideas about how to manipulate the image with CSS on rollover for making a change I am open.
Thanx!
You could put both images in one bigger image, use it as a background image and change only the position on roll-over.
With CSS3, there is an opacity option. This way you wouldn't be forced to reload an image when they hover above something.
#div {
background-image: url('blah.png');
}
#div:hover {
opacity: 0.5;
}
I'm not exactly sure if that's the right way to use it so you should use google for more examples. However, you should be careful because not all browsers might be supporting CSS3 yet.
Try using the :hover style on a tag. It may not be supported very well in early IE editions. But you can do something like:
img {
border: 1px solid black;
}
img:hover {
border: 1px solid white;
}
Related
I'm trying to launch a website, and it is my first experience working with CSS. I purchased a custom theme from themeforest. I'm trying to make it so that I have two background colors: I want there to be a secondary and a primary background color.
Here's an example page: http://nosmokingmedia.com/testreview-aphex-twin/ - What I'm trying to do is make it so that the orange background remains, but implement a white background behind the text to make it more legible and cleaner.
There is an option in my theme to add custom CSS (which I have only done so far for the global font color), but I'm not exactly sure how I would go about adding this background. So far I have tried:
#subbackground
{
width: 65%;
height: 100%;
background-color: #D9D9D9;
opacity: .2;
margin-left:-32.5%;
width:65%;
left:50%;
position:fixed;
z-index: 2;
color:#ffffff;
When I inputted this into the section for custom css codes, it had no effect.
Thanks in advance!
Unless you have an element with an id="subbackground", that won't do anything.
Based on the HTML in your page, it seems like:
.post-text {
background-color: #FFF;
opacity: 0.8;
}
might be something like what you're looking for.
If that is your page then adding this should work:
.post-text p
{
background-color: #D9D9D9;
opacity: .2;
}
This sets the background color of all paragraphs inside of all elements with class 'post-text' (which is where your text is ) to have a background color and opacity. The way you have it is overly complicated. Simpler is better :)
I've had a look around but can't quite find what i'm looking for.
I currently have a css animation on my page which is triggered by :hover. I would like this to change to 'click' or 'touch' when the page is resized past width 700px using media queries.
Here is what i have at the moment: http://jsfiddle.net/danieljoseph/3p6Kz/
As you can see, the :hover will not work on mobile devices but i still want to ensure it works the same way just by click, not hover.
I would rather use css if possible but happy with JQuery also.
I have a feeling this is very easy to do but i am just missing something very obvious! Any help would be appreciated.
Here is the css animation:
.info-slide {
position:absolute;
bottom:0;
float:left;
width:100%;
background:url(../images/blue-back.png);
height:60px;
cursor:pointer;
overflow:hidden;
text-align:center;
transition: height .4s ease-in-out;
-webkit-transition: height .4s ease-in-out;
-moz-transition: height .4s ease-in-out;
}
.info-slide:hover {
height:300px;
}
If you use :active selector in combination with :hover you can achieve this according to w3schools as long as the :active selector is called after the :hover selector.
.info-slide:hover, .info-slide:active{
height:300px;
}
You'd have to test the FIDDLE in a mobile environment. I can't at the moment.
correction - I just tested in a mobile, it works fine
You can add onclick="" to hovered element. Hover will work after that.
Edit: But you really shouldn't add anything style related to your markup, just posted it as an alternative.
document.addEventListener("touchstart", function() {}, true);
This snippet will enable hover effects for touchscreens
I got the same trouble, in mobile device with Microsoft's Edge browser. I can solve the problem with: aria-haspopup="true". It need to add to the div and the :hover, :active, :focus for the other mobile browsers.
Example html:
<div class="left_bar" aria-haspopup="true">
CSS:
.left_bar:hover, .left_bar:focus, .left_bar:active{
left: 0%;
}
On most devices, the other answers work. For me, to ensure it worked on every device (in react) I had to wrap it in an anchor tag <a> and add the following:
:hover, :focus, :active (in that order), as well as role="button" and tabIndex="0".
I am a CSS noob but I have noticed that hover will work for touch screens so long as it's a "hoverable" element: image, link, button. You can do it all with CSS using the following trick.
Change your div background to an actual image tag within the div or create a dummy link around the entire div, it will then register as a hover when you touch the image.
Doing this will mean that you need the rest of your page to also be "hoverable" so when you touch outside of the image it recognizes that info-slide:hover has ended. My trick is to make all of my other content dummy links.
It's not very elegant but it works.
A CSS only solution for those who are having trouble with mobile touchscreen button styling.
This will fix your hover-stick / active button problems.
body, html {
width: 600px;
}
p {
font-size: 20px;
}
button {
border: none;
width: 200px;
height: 60px;
border-radius: 30px;
background: #00aeff;
font-size: 20px;
}
button:active {
background: black;
color: white;
}
.delayed {
transition: all 0.2s;
transition-delay: 300ms;
}
.delayed:active {
transition: none;
}
<h1>Sticky styles for better touch screen buttons!</h1>
<button>Normal button</button>
<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>
<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures. With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely. This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>
<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>
Well I agree with above answers but still there can be an another way to do this and it is by using media queries.
Suppose this is what you want to do :
body.nontouch nav a:hover {
background: yellow;
}
then you can do this by media query as :
#media(hover: hover) and (pointer: fine) {
nav a:hover {
background: yellow;
}
}
And for more details you can visit this page.
I think this simple method can achieve this goal.
With CSS you can turn off pointer event to 'none' then use jQuery to switch classes.
.item{
pointer-events:none;
}
.item.clicked{
pointer-events:inherit;
}
.item:hover,.item:active{
/* Your Style On Hover Converted to Tap*/
background:#000;
}
Use jQuery to switch classed:
jQuery('.item').click(function(e){
e.preventDefault();
$(this).addClass('clicked')l
});
I'm making some printable calendar website using HTML, CSS and JS.
Unfortunately I cannot use CSS property called text-shadow, because shadow behind text prints as solid black text without any blur or transparency.
Same problem occurs when I'm trying to use box-shadow for any div - shadow prints like solid black color with no transparency.
I'm using Chrome with style html {-webkit-print-color-adjust: exact;} to ensure all background colors will be printed.
Any workaround? I would prefer not to use any background image.
Edit:
I don't want to hide shadows, it's very easy of course. I want to have shadows printed correctly.
I realise this is an old question, but just to note that it is possible to make shadows print correctly in Chrome. You need to set both -webkit-print-color-adjust and a filter, as found in this bug thread: https://code.google.com/p/chromium/issues/detail?id=174583
.thing {
-webkit-print-color-adjust:exact;
-webkit-filter:opacity(1);
}
(I prefer to set opacity rather than blur as used in the bug, simply because it seems likely to cause fewer problems).
Note that this will limit the resolution of the print (filter makes it send a rasterised version), so text might become harder to read. If you really want to work around that, I'd suggest duplicating the div (one for the shadow, with the filter hack and transparent text, and another for the text with no shadow)
Here is the solution:
#media print {
.item {
-webkit-filter: drop-shadow(4px 4px 1px #ccc);
text-shadow: 4px 4px 1px #ccc;
}
}
If anyone is looking for a way to avoid rasterizing the content of the element with a box-shadow, this is what I used (extended from #Dave's answer):
.thing {
position: relative;
}
.thing::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: /* define your shadow here, not in .thing */;
-webkit-print-color-adjust: exact;
-webkit-filter: opacity(1);
}
This creates a pseudo-element at the beginning of the element you want to have a shadow. The pseudo-element is sized the same as the parent and then the drop shadow is applied to it only. That way, the drop shadow can be rasterized while the rest of the content of the parent is not.
There are a few issues if you have borders, if your element doesn't support children, etc. but this works in most cases.
I used all the possible solutions to this but the border shadow(with stepped gradient) would show up on my page, but not when I do a Ctrl+P on the page and either- print the page or save as PDF. I even used-
-webkit-print-color-adjust:exact;
-webkit-filter:opacity(1);
I do the same Ctrl+P on this page- https://css-tricks.com/examples/BodyBorder/kottke.php and it works fine.
Solution: I had to remove the bootstrap.css included at the top of my page for the border shadow to show up on my PDF, or when I print the page.
<link href="/lib/bootstrap-3.2.0/dist/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" >
I tried
html {
-webkit-print-color-adjust: exact;
-webkit-filter: opacity(1);
}
But it causes links on PDF non-clickable for unknown reason.
After I change it to the css below, both shadow and link problems are solved.
.thing {
-webkit-print-color-adjust: exact;
-webkit-filter: blur(0);
}
You don't need to compromise your web page to make it look pretty printed. Simply define a print.css that makes the printed view suit your needs.
# index.html
<head>
<link href="/css/print.css" media="print" rel="stylesheet" type="text/css" />
</head>
# print.css
.shadow {
text-shadow: none;
}
For more, Smashing Magazine has a helpful article on How To Set Up A Print Style Sheet.
This question was asked before but the solution is not applicable in my case. I want to make sure certain background images are printed because they are integral to the page. (They are not images directly in the page because there are several of them being used as CSS sprites.)
Another solution on that same question suggests using list-style-image, which only works if you have a different image for every icon, no CSS sprites possible.
Aside from creating a separate page with the icons inline, is there another solution?
With Chrome and Safari you can add the CSS style -webkit-print-color-adjust: exact; to the element to force print the background color and/or image
Browsers, by default, have their option to print background-colors and images turned off. You can add some lines in CSS to bypass this.
Just add:
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
color-adjust: exact !important; /* Firefox 48 – 96 */
print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
}
I found a way to print the background image with CSS. It's a bit dependent on how your background is laid out, but it seems to work for my application.
Essentially, you add the #media print to the end of your stylesheet and change the body background slightly.
Example, if your current CSS looks like this:
body {
background:url(images/mybg.png) no-repeat;
}
At the end of your stylesheet, you add:
#media print {
body {
content:url(images/mybg.png);
}
}
This adds the image to the body as a "foreground" image, thus making it printable.
You may need to add some additional CSS to make the z-index proper. But again, its up to how your page is laid out.
This worked for me when I couldn't get a header image to show up in print view.
You have very little control over a browser's printing methods. At most you can SUGGEST, but if the browser's print settings have "don't print background images", there's nothing you can do without rewriting your page to turn the background images into floating "foreground" images that happen to be behind other content.
The below code works well for me (at least for Chrome).
I also added some margin and page orientation controls.(portrait, landscape)
<style type="text/css" media="print">
#media print {
body {-webkit-print-color-adjust: exact;}
}
#page {
size:A4 landscape;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin: 0;
-webkit-print-color-adjust: exact;
}
</style>
Make sure to use the !important attribute. This dramatically increases the likelihood your styles are retained when printed.
#example1 {
background:url(image.png) no-repeat !important;
}
#example2 {
background-color: #123456 !important;
}
Like #ckpepper02 said, the body content:url option works well. I found however that if you modify it slightly you can just use it to add a header image of sorts using the :before pseudo element as follows.
#media print {
body:before { content: url(img/printlogo.png);}
}
That will slip the image at the top of the page, and from my limited testing, it works in Chrome and the IE9
-hanz
Use psuedo-elements. While many browsers will ignore background images, psuedo-elements with their content set to an image are technically NOT background images. You can then position the background image roughly where the image should have gone (though it's not as easy or precise as the original image).
One drawback is that for this to work in Chrome, you need to specify this behavior outside of your print media query, and then make it visible in the print media query block. So, something like this...
.image:before{
visibility:hidden;
position:absolute;
content: url("your/image/path");
}
#media print {
.image{
position:relative;
}
.image:before{
visibility:visible;
top:etc...
}
}
The drawback is that the image will often be downloaded on normal page loads, adding unnecessary bulk. You can avoid that by just using the same image/path you'd already used for the original, visible image.
it is working in google chrome when you add !important attribute to background image
make sure you add attribute first and try again, you can do it like that
.inputbg {
background: url('inputbg.png') !important;
}
Browsers, by default, have their option to print background-colors and images turned off. You can add some lines in CSS to bypass this. Just add:
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
Note: It's not working on the entire body but you could speciy it for a inner element or a container div element.
You can use borders for fixed colors.
borderTop: solid 15px black;
and for gradient background you can use:
box-sizing: border-box;
border-style: solid;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-image: linear-gradient(to right, red, blue) 100%;
border-image-slice: 1;
border-width: 18px;
https://gist.github.com/danomanion/6175687 proposes an elegant solution, using a custom bullet in place of a background image. In this example, the aim is to apply a background image to an a element with class logo. (You should substitute these for the identifier of the element you wish to style.)
a.logo {
display: list-item;
list-style-image: url("../images/desired-background.png");
list-style-position: inside;
}
By including this within a
#media print {
}
block, I'm able to replace a white-on-transparent logo on the screen, rendered as a background-image, with a black-on-transparent logo for print.
You can do some tricks like that:
<style>
#page {
size: 21cm 29.7cm;
size: landscape
/*margin: 30mm 45mm 30mm 45mm;*/
}
.whater{
opacity: 0.05;
height: 100%;
width: 100%;
position: absolute;
z-index: 9999;
}
</style>
In body tag:
<img src="YOUR IMAGE URL" class="whater"/>
I have a CSS rule like this:
a:hover { background-color: #fff; }
But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.
I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:
a.imagelink:hover { background-color: transparent; }
Today I was looking for a more elegant solution to this problem when I stumbled upon this.
Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.
Is there a nice way to solve this problem, or do I have to use the dirty approach again?
Thanks,
I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any...
About images with that bottom gap, you could do the following:
a img{vertical-align:text-bottom;}
This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.
For the transparent images, you should use a class.
I really hope that's solved in CSS3, by implementing a parent selector.
I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?
If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:
<a ...><img src="..." /></a>
To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...
a:hover { background: SomeColor }
a:hover img { background-color: #fff; }
I usually do something like this to remove the gap under images:
img {
display: block;
float: left;
}
Of course this is not always the ideal solution but it's fine in most situations.
This way works way better.
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
background-color: transparent;
}
No cumbersome classes that have to be applied to each image. Detailed description here:
http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/
Untested idea:
a:hover {background-color: #fff;}
img:hover { background-color: transparent;}
The following should work (untested):
First you
a:hover { background-color: #fff; }
Then you
a:imagelink:hover { background-color: inherit; }
The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.
I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.
you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.
I assume you have whitespaces between <a> and <img>? try removing that like this:
<a><img /></a>
I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.
Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).
body {
background-color: #112233;
}
a:hover {
background-color: red;
}
a img {
border-style: none; /* not need for this solution, but removes borders around images which have a link */
vertical-align: bottom; /* here */
}
a:hover img {
background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}
I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:
background-image: url(file:"use the same background image or color");