to change to
when mouse over.. like you can do with a:hover, how can i do this?
I tried
addFriend img:hover{
background: url(images/addFriend_hover.png);
}
Ditch the img tag, and do it without javascript
(off the top of my head, untested)
HTML
<div class="addFriend">Add Friend</div>
CSS
.addFriend { background: url(images/addFriend.png); }
.addFriend:hover { background: url(images/addFriend_hover.png); }
For it to work in all browsers with the least amount of code you can do it with CSS.
Add A Friend
.icon {
display: block;
width: (width of image);
height: (height of image);
text-indent: -9999px; /* hides the text 'Add A Friend' */
background: url(url of image) no-repeat center center;
padding-right: 55px;
}
.icon:hover {
background: url(url of new image) no-repeat center center;
}
You could also use jQuery.
$('img.addFriend').hover(function() {
$(this).attr('src','images/addFriend_hover.png');
}, function() {
$(this).attr('src','images/addFriend.png');
});
Edit
You could also do non-jQuery, I assume you don't want a background-image or an href
<img src='images/addFriend.png' onmouseover='this.src="images/addFriend_hover.png"' onmouseout='this.src="images/addFriend.png"' />
You have to use a container with a background image, e.g. a div with a specified height and width. Then you can use the background image and a :hover-pseudo-class.
This tutorial might be useful: http://www.w3schools.com/js/js_animation.asp
To see if it does what you want, scroll down to "The Entire Code" and click "Try it yourself".
Related
I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
I am building a website with WordPress. On my homepage I want a picture grid (10 x 3) of different products, and when you hover over each picture, a caption with the product name will pop up.
I have managed to do 3/4 of it but there's this massive white space below each row. :(
I am using the SiteOrigin editor widget to insert the image, and using HTML and CSS to code the hover effects. See below for the current coding.
HTML:
<div id="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" />
<p class="text">Summer Mikan</p>
</div>
CSS:
.text {
color: #000000;
font-size: 16px;
font-weight: bold;
text-align: center;
background: rgba(255, 255, 255, 0.5);
}
#pic .text {
position:relative;
bottom:80px;
left:0px;
visibility:hidden;
}
#pic:hover .text {
visibility:visible;
}
Here's the website so you can see what I've done: http://peacefruit.net
The top row has the captions, but also, the pesky gap. The bottom three rows are examples of how I want it to look (no borders or gaps between pics). All rows and individual widgets have no padding, margins or gutters and I've already adjusted the theme padding to 0 with CSS.
I'm sure it's a simple line of code I'm missing, but it's driving me crazy!
Please send help.
Try adding to your inline css for siteorigin-panels-stretch
overflow:hidden;
height:164.89px;
Hope this works.
Thanks!
In your case
the id should be unique.
So, it is better to change #pic to a class
Also, the <p> tag in your style contain padding-bottom and it will case the white space problem.
Change each pic to the following
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp- content/uploads/2016/11/Hassaku.png">
<div class="text">Summer Mikan</div>
</div>
CSS:
.pic{
position: relative;
}
.pic .text{
position: absolute;
top: 80px;
width: 100%;
visibility: hidden;
}
then it should be work.
Stylesheets for WordPress themes can have a lot of CSS bloat, so you're on the right track creating a custom stylesheet, to tackle the styling nuances you desire.
Since this is a responsive theme, it's best to begin solving this from a mobile-first perspective.
The first thing to prune is the bottom-margin: 30px; for .panel-grid-cell, like this:
.home #main .panel-grid-cell {
margin-bottom: 0;
}
The next thing is to correct your HTML mark-up. The value of pic is given to multiple id attributes. An id attribute is used to denote a unique element. The class attribute denotes a non-unique element. pic should be assigned to class attributes instead, since many elements in your layout utilize this hook value. Like this:
<div class="pic">
I'm noticing that img.hover and p.text are getting wrapped in an unnecessary <p> tag. Make sure that this does not happen in the SiteOrigin editor.
You should then prune the bottom-margin: 1.5em for paragraphs inside of the .pic divs (note the designation of pic as a class hook .pic, rather than an id hook, which would have been #pic):
.pic p {
margin-bottom: 0;
}
To get even closer, relative positioning should be used on the .pic div to ensure that the subsequent styling suggestion (position: absolute;) will take effect:
.pic {
position: relative;
}
And then, for the text that appears when hovering an image:
p.text {
position: absolute;
width: 100%;
}
The styles above will work for mobile, but your theme is responsive, and you might need to account for some styling variations with different screen sizes.
For tablets, you'd need a media query like this:
#media (min-width: 600px) {
.some-class {
some-property: some-value;
}
etc...
}
And finally, for desktop:
#media (min-width: 1000px) {
.some-class {
some-property: some-value;
}
etc....
}
Thanks everyone for your help :) After some fiddling around with the suggestions and a software update, there is no gap now!
I thought I'd post my final code in case anyone has a similar problem and it might be of some help. (Note: there are some minor style changes which differ from the original post but have no effect on how it works).
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Summer-Mikan.png"/>
<div class="text">Summer Mikan</div>
</div>
WIDGET CLASS:
fade
CSS:
.fade {
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.fade:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.pic {
position: relative;
}
.text {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
text-align: center;
background: rgba(214, 187, 14, 0.85);
}
.pic .text {
position:absolute;
top: 0px;
width: 100%;
visibility:hidden;
}
.pic:hover .text {
visibility:visible;
}
.pic p {
margin-bottom: 0px;
}
So glad it finally works, much appreciation to everyone!
I can't get transition to work with this code
Changing text-align for left to right. Very simple code.
<style>
/* Default State */
div {
background: green;
width: 1000px;
height: 100px;
line-height: 100px;
color: white;
text-align: left;
transition: all 10s;
-webkit-transition: all 10s;
}
/* Toggled State */
input[type=checkbox]:checked ~ div {
text-align: right;
}
</style>
<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
<div>Control me</div>
Also what if i need to display none to block
The text-align property cannot be animated in CSS, as you can see here. Although this cannot be animated with plain CSS, you can use the jQuery library, as I do in the example below:
$("input[type=checkbox]").click(function (e) {
if ($(this).prop("checked")) {
var spanItem = document.getElementsByTagName("span").item(0).clientWidth;
alert(spanItem);
$("span").animate({
width: $(this).textWidth()
}, 500);
}
});
The code above is a sample from what I've written in this JSFiddle.
Text-align isn't supported by CSS Transition (like maximgladkov said). There are lots of alternatives though.
https://developer.mozilla.org/en-US/docs/CSS/CSS_animated_properties
On a small sidenote; you might want to wrap your labels around your input elements.
I think text-align property cannot be animated.
But you can add another element with position: absolute and animate it's left or right property.
I'm trying to change img src (not the background img src) with css
<img id="btnUp" src="img/btnUp.png" alt="btnUp"/>
#btnUp{
cursor:pointer;
}
#btnUp:hover{
src:img/btnUpHover; /* is this possible ? It would be so elegant way.*/
}
You can use :
content: url("/_layouts/images/GEARS_AN.GIF")
There is another way to fix this : using CSS box-sizing.
HTML :
<img class="banner" src="http://domaine.com/banner.png">
CSS :
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://domain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
http://css-tricks.com/replace-the-image-in-an-img-with-css/
you could try something like this
<img id="btnUp" src="empty.png" alt="btnUp" />
or
<div id="btnUp" title="btnUp"> <div/>
#btnUp{
cursor:pointer;
width:50px;
height:50px;
float:left;
}
#btnUp{
background-image:url('x.png')
}
#btnUp:hover{
background-image:url('y.png')
}
You can use CSS to a) make the original image invisible by setting its width and height to 0, or moving it off-screen etc, and b) insert a new image in its ::before or ::after pseudo-element.
That will be a performance hit though, as the browser will then load both the original and the new image. But it won't require Javascript!
You can't set the image src attribute via CSS. you can get is, as if you wanted to set use background or background-image.
No - CSS can only be used to change CSS background images, not HTML content.
In general UI elements (not content) should be rendered using CSS backgrounds anyway. Swapping classes can swap background images.
You can use a mixture of JavaScript and CSS to achieve this, but you can not do this with CSS alone. <img id="btnUp" src="empty.png" alt="btnUp" onmouseover="change(img)" onmouseout="changeback(img)" />
Instead of img you would put file name sans file type.
function change(img){
document.getElementById("btnUp").src= img + ".png";
}
function changeback(img){
document.getElementById("btnUp").src= img + ".png";
}
Then you use CSS to modify the img tag or the id to your liking.
You could set the image to a completely transparent image, then change the background image like so:
img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}
The images do have to be the same size though. :(
Hope this helps!
content:url('imagelinkhere');
This is working, I tested it
I want to use the following style in GWT client bundle:
.myClass tr:hover {
background: url("myImage.png") 185px 2px no-repeat;
}
I declared the image as follows:
#Source("resources/myImage.png")
#ImageOptions(repeatStyle = RepeatStyle.None)
ImageResource myImage();
and changes the style to:
#sprite .myClass tr:hover {
gwt-image: "myImage";
background-position: 185px 2px;
}
But it does not work. There are several images in the generated XYZ.cache.png. So if I change the background-position in firebug I see the complete image bundle.
How can I move the background image to the right position?
#sprite .myClass tr:hover {
gwt-image: "myImage";
}
div.myClass tr:hover{
background-position: 185px 2px;
}
As you noticed, gwt-image will be default remove 'background-position' along with some other ones. To override the default position of 0 0, add a more specific css rule with the position you desire.
The generated width property of ImageSprite does not work because the width of tr element is fix. It is better zu create a td with an image element (as ImageResource) on the right side of table row. CSS looks like:
<code>
div.myClass img {
visibility: hidden;
}
div.myClass tr:hover img {
visibility: visible;
}
</code>
So solution assumes there are no more images in the table.