trying to get my code to change the background image to "color.jpg" when "spiral.svg" is being hovered over. I think im getting closer, definitely missing something but not sure what that is!
HTML
<div class ="spiral">
<img src="spiral.svg">
</div>
CSS
img {
max-width: ???;
max-height: ???;
}
.spiral:hover {
background:url('color.jpg') center;
z-index: some positive number higher than my orig background image?
}
body {
background:url('orig.jpeg') center;
z-index: -60;
}
You may try something like this.
.twitter{
display:block;
border:1px solid red;
width: 30px;
height:30px;
background-image:url(http://i.imgur.com/qM7IYaM.png?1);
background-position:-32px 31px;
transition:0.1s;
}
.twitter:hover{
background-position:-32px 63px;
}
<div href="https://twitter.com/georgevere12" class="twitter">
</div>
looks like this is not possible with just CSS/HTML however this was the best link i found using a tiny bit of jquery https://stackoverflow.com/a/19770298/5225450
Related
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!
On a number input it has a spinner which has several css properties but I can't seem to find a way to change the size of the spinner itself. I am talking about <input type='number'>. I tried finding something that would change the size but I haven't been able to find anything. The other issue I guess is that every browser on possibly every OS is going to have a potentially different implementation of the spinner itself. When I say spinner I am talking about the highlighted part of this image.
I cannot use the JQuery UI spinner because the large app I am developing uses JQuery UI 1.8 which did not include the spinner. Upgrading causes issues.
Not ideal, but try playing around with the CSS transform property:
For example,
input[type=number]
{
transform: scale(2);
}
This increases the size of the entire input, but maybe this (in conjunction with setting font-size, line-height, height, width) can produce a desired effect.
This CSS seems to work in Chrome by replacing the spinners with a static image (of a spinner) and then control the size and position of the image within the element and making it invisible by default until the user hovers over it:
* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background: #0F0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
width: 3em;
border-left: 1px solid #0f0;
opacity: 0; /* shows Spin Buttons per default (Chrome >= 39) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
input[type="number"].mod::-webkit-inner-spin-button:hover,
input[type="number"].mod::-webkit-inner-spin-button:active{
box-shadow: 0 0 2px #0CF;
opacity: .7;
}
Plain ole HTML...
No library or images required.
HTML
<!-- Score Control Container -->
<div class = "Score-Control">
<div class = "Score-Value-Container">
<div id="RoundScore" class="Score-Value">
10
</div>
</div>
<div class = "Score-UpDown">
<div class = "Score-Button-Container">
<div class = "Score-Button " onclick="IncrementScore();">
▲
</div>
</div>
<div class = "Score-Button-Container">
<div class = "Score-Button " onclick="DecrementScore();">
▼
</div>
</div>
</div>
</div>
CSS
.Score-Control {
width: 200px;
}
.Score-Value-Container{
position:relative;
display: table;
overflow: hidden;
height:80px;
background-color:#aaa;
width:66%;
float:left;
font-size: 44px;
vertical-align: middle;
text-align: center;
}
.Score-Value {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.Score-UpDown{
position:relative;
height:80px;
background-color: burlywood;
width:34%;
float:right;
}
.Score-Button-Container {
display: table;
height: 50%;
width: 100%;
overflow: hidden;
background-color:green;
}
.Score-Button {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 27px;
}
JavaScript
function IncrementScore() {
var RoundScore = document.getElementById("RoundScore").innerHTML;
if (RoundScore < 10) {
RoundScore++
document.getElementById("RoundScore").innerHTML = RoundScore;
}
}
function DecrementScore() {
var RoundScore = document.getElementById("RoundScore").innerHTML;
if (RoundScore > 1) {
RoundScore--
document.getElementById("RoundScore").innerHTML = RoundScore;
}
}
Code in JSFiddle
You could make an input field with two buttons for up and down and style them then the way you like.
<input type="text" name="something">
<span class="goUp"></span>
<span class="goDown"></span>
js:
var inputField = $('input[name="something"]');
$('.goUp').click(function() {
inputField.val(inputField.val() + 1);
});
$('.goDown').click(function() {
inputField.val(inputField.val() - 1);
});
you then should also check, that the input has only numbers inside, so that your +/- 1 really works.
The “size of the spinner” is a vague concept, but the <input type=number> element seems to obey at least width, height, and font property settings. Example:
<input type=number value=42 min=0 max=99
style="font: 24pt Courier; width: 3ch; height: 3em">
Whether such settings are useful and whether they should work is a different issue. It can be argued that the implementation of such elements is expected to be a browser-dependent nice, useable widget suitable for the browsing conditions, rather than something that authors should mess around with. But in practice, the widget is largely affected by CSS settings, and this might be a good thing in practice, e.g. because the input box tends to be too wide by default. (We could expect browsers to set it according to min and max values, but this just doesn’t happen at present.) The risk is that by setting the width, you might conflict with the implementation. The code above expects the up and down arrows to take a width of one character at most, but this guess might some day be wrong.
I have a gallery of images with links.
Edit: Here's the code I have to work with:
<div class="gallerypagetabs"><img alt="Free Victorian Purse Pattern" src="https://lh3.googleusercontent.com/-m4y6eS2KGRQ/Ug7TKD3sbYI/AAAAAAAAHNc/6qoeuGedjOY/s200-c/free-victorian-purse-pattern-1.jpg"><br>Free Victorian Purse Pattern<img alt="Natural Form Victorian Overskirt" src="https://lh3.googleusercontent.com/-ZrTDaXEOiiU/US__mPzz3dI/AAAAAAAADWQ/eBm3tO3P8oI/s200-c/IMG_5482%255B6%255D.jpg"><br>Natural Form Victorian Overskirt<img alt="Truly Victorian TV221 1878 Underskirt Pattern Review" src="https://lh4.googleusercontent.com/-GmrRTxJ5NGY/UKfO_SQzymI/AAAAAAAAAHA/A9qx6czpyJk/s200-c/Truly-Victorian-TV221-1878-Tie-Back-%255B1%255D%255B4%255D.png"><br>Truly Victorian TV221 1878 Underskirt Pattern Review<img alt="Truly Victorian TV121 Petticoat Pattern Review" src="http://lh4.ggpht.com/-qTsclIxCTKY/UH7fK3jqKII/AAAAAAAAodI/2GaQOVrGuuA/s200-c/Truly%252520Victorian%252520TV121%2525201879%252520Petticoat%252520with%252520Detachable%252520Train%25255B6%25255D.png?imgmax=800"><br>Truly Victorian TV121 Petticoat Pattern Review..ad naseum..</div>
CSS:
.gallerypagetabs a,.gallerypagetabs p{
float:left;
font-size:.80em;
height:250px;
padding:10px;
text-align: center;
width:200px
}
What I'd like to do is show a transparent image with stars on them when someone hovers over the image. So if a person hovers over the Free Victorian Purse Pattern image, they'll see an image of - let's say - five stars indicating that the pattern has received a rating of 5 out of 5 stars from me.
I've tried both of the following with no luck. The code shows the image on hover, but it shows at the bottom of the image instead of overlapping it:
.gallerypagetabs a:hover{
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit
}
AND
.gallerypagetabs a:hover{
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit;
z-index:10
}
Any advice? I don't want to use Javascript, and I want to add as little coding to the HTML as possible cannot change the html other than adding another class or id at the beginning of it. It all has to be done through CSS. Here's how I'd like it to look. Thanks for your help!
The code that WORKS! (Thanks cimmanon!)
(Changed gallerypagetabs to gallerypatterntab to isolate the class from the rest of the blog. Screenshot from Blogger - yeah Blogger likes to rewrite things like quotations)
You can use a pseudo element for this purpose. No need for extra markup.
http://cssdeck.com/labs/anxnrkhr
<img src="http://placekitten.com/100/100" />
a {
position: relative;
display: inline-block;
}
a:hover:before {
content: '';
display: block;
background: rgba(255, 0, 0, .5); /* your background */
width: 20px; /* image width */
height: 100px; /* image height */
position: absolute;
top: 0;
right: 0;
}
This is untested, but I think you want something like:
.gallerypagetabs a, .gallerypagetabs img{
position:absolute;
z-index:1;
}
.gallerypagetabs a:hover{
z-index:2;
}
.gallerypagetabs{
position:relative;
}
This is untested, but hopefully gives you an idea about how to realize the effect you are after.
Putting the image on the anchor's background isn't going to work because the image will hide it.
You can add an element containing the stars in an absolute position inside the anchor:
<a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html">
<img src="https://lh3.goog...An-purse-pattern-1.jpg" alt="Free.. Pattern">
<br>
Free Victorian Purse Pattern
<i class="stars"></i>
</a>
And a CSS similar to this (all numbers can vary):
a {
position: relative;
}
.stars {
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit;
width: 20px;
height: 80px;
position: absolute;
right: 10px;
top: 10px;
display: none;
}
a:hover .stars {
display: block;
}
P.S - <br /> is supposed to be self-closing. And it's better not using it only to make a new line after the image, but maybe give the image this style:
a img {
display: block;
}
I have a background image as part of a body class in CSS:
body.soon1 {
background-color: white;
background-image: url(soon1a.png);
background-position: center;
background-repeat: no-repeat;
}
Then later on I have a javascript function that will change the body class.
The reason I have the image in the background is that when the script activates, the background-color and the background-image will both change at exactly the same time and you can't select the image.
Is it possible that I could change the cursor type only while hovering over the background-image? I understand I can put
cursor: pointer;
in the body styles, but this makes the cursor appear over the entire page.
You can view the live page, currently, where the background changes when you click anywhere on the page.
Edit: I've got something that works for me now. I added a centered div with nothing in it:
div.clickme {
width:300px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -200px;
cursor: pointer;
}
This works for me because I can set my own arbitrary area, but if anybody has a better solution, let me know.
There's really no compelling reason to make the image a background image. You would be better served by putting the image in two wrappers (required to guarantee absolute centering vertically and horizontally regardless of viewport).
You could extend your array by populating it with objects, so that it can hold possible values for the image and the body style. This way, you can use the same method (cycle through the array) to pick out all of the changes you want, even if you wanted to add other changes later.
Also, while web browsers are rather lenient with standards, it really is trivial to conform to the simple HTML 5 requirements and still keep the functionality.
Lastly, I strongly encourage you to avoid what I call "hipster coding". While it's fun to name functions, variables, et al with obscure names to delight the few that check the source code, it makes for needlessly obtuse language and lower maintainability. In short, it's a bad practice, even if you are the only maintainer.
Observe a new version of your source based on these comments (with indentation cleanup) below.
<html>
<head>
<title>Something Amazing Will Happen</title>
<style type="text/css">
body.light {
background-color: white;
}
body.dark {
background-color: black;
}
div.outside-wrapper {
position: absolute;
top: 50%;
width: 100%;
height: 1px;
overflow: visible;
}
div.inside-wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 381px;
height: 393px;
margin: -197px 0 0 -191px;
cursor: pointer;
}
</style>
<script type="text/javascript">
styleIndex = 0;
var states = [{style: "light", image: "soon1a.png"}, {style: "dark", image: "soon2a.png"}];
function nextStyle() {
if (++styleIndex >= states.length)
styleIndex = 0;
var state = states[styleIndex];
document.body.className = state.style;
document.getElementById("clickme").src = state.image;
}
var tap = true;
document.addEventListener('touchstart',function(e) {
tap = true;
});
document.addEventListener('click',function(e) {
nextStyle()
tap = false;
});
document.addEventListener('touchmove',function(e) {
tap = false;
});
document.addEventListener('touchend',function(e) {
if(tap)
nextStyle();
});
</script>
</head>
<body class="light">
<div class="outside-wrapper">
<div class="inside-wrapper">
<img src="soon1a.png" id="clickme">
</div>
</div>
</body>
</html>
<!-- Don't ask me what it is. -->
Try this
body.soon1 {
background-color: white;
background-image: url(soon1a.png);
background-position: center;
background-repeat: no-repeat;
}
body.soon1:active{
cursor: pointer;
}
What you can do is, put the cursor: pointer on body and change the cursor on the childs. Do somthing like this: http://jsfiddle.net/HSdH3/
html:
<body>
<div></div>
</body>
css:
body {
background: red;
width:100%;
height: 100%;
}
body:hover {
cursor: pointer;
}
div {
width: 300px;
height: 300px;
margin: 0 auto;
background: white;
}
div:hover {
cursor: auto;
}
Something like this should work:
<div id="myDiv" style="cursor: pointer">
Another option is to use jQuery, although it may be overkill for this. Regardless, here's what it would look like:
$(document).ready(function(){
$("#myDiv").hover(function() {
$(this).css('cursor', 'pointer');
});
});
Check it out here: http://jsfiddle.net/K5fex/
I want that when I hover an element(a box made with css), the background color of the body changes from one color to another, for example white to red. The problem is that this should be done using css only and no javascript. And if javascript has to be neccesarily be used, then the color should change back to the previous one on mouse out.
---------------EDIT---------------
Actually I was trying this:
body{backgroung: #000;}
#div{some properties}
body #div:hover{background: #fff;}
Pure CSS experiment:
http://jsfiddle.net/Tymek/yrKRX/
HTML
<div id="trigger"></div>
<div id="bg"></div>
CSS
body {
height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100%;
height: 100%;
z-index: 1;
background: #EEE;
}
#trigger {
position: absolute;
width: 200px;
height: 136px;
top: 50%;
left: 50%;
margin: -68px 0 0 -100px;
background: #333;
z-index: 2;
}
/* KEY */
#trigger:hover ~ #bg {
background: #EE0;
}
Please use like this
<html>
<body>
<style type="text/css">
.top{
background:red;
}
.top2{
background:white;
}
</style>
<div class="top" onmouseover="this.className='top2'"
onmouseout="this.className='top'">Here</div>
</body>
</html>
Use the :hover selector.
It seems pretty straight forward unless you are doing something very different.
Check following example for reference:
.classname {
background-color:white;
}
.classname:hover {
background-color:red;
}
Working fiddle
You have many typo's in your code such as mispelling background as backgroung and treating div as an ID (#div).
CSS (with explanation to typos)
body{background: #000;} /*backgroung (mis-spelled)*/
div{width:100px; /*#div (treated as ID)*/
height:100px;
border:1px solid black;}
To hover over a parent tag you must compulsorily use javascript or jQuery. you may be getting doubt that why there is no css property to select the parent tag, if so, then you can go through this interesting link . To avoid parent selector concept in most of cases we can evade using positioning in CSS (check Tymek's solution).
jQuery
$(document).ready(function(){
$("div").hover(function(){
$(this).parent(this).css('background-color','red');
});
$("div").mouseleave(function(){
$(this).parent(this).css('background-color','white');
});
});
Assuming you are new to jQuery, give a link in head tag of HTML, something like below to make the above function work.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Check this Working fiddle