Right away, I have to apologize for not knowing how to correctly phrase my question. Hopefully my point comes across in this description.
I have a full page landing graphic on a website that I'm working with.
What I want to learn to do is to make a part of the graphic change when you mouse over it.
HTML
<header id="full-landing">
CSS
#full-landing{
background: url('../images/Asset 64.svg');
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
}
Thank you.
IMAGE-I would like to change each hexagon on mouse-over.
So I thought that maybe SVG animation could work for this. But I am not sure. I would like to add a mouse-over to each colored hexagon.
Just add a :hover pseudo selector:
#full-landing:hover {
background-image: url('../images/different-image.svg');
}
What I want to learn to do is to make a part of the graphic change
when you mouse over it.
Though this is more of a graphic related solution vs. code you could copy the original image, slightly alter it to your liking, and use that in your :hover pseudo selector. If not, positioning/overlaying the two could be more trouble than it's worth. Of course this is all without seeing your image(s). I could be wrong.
Related
The issue I’m having here is with the x-ray image behind the one in the front. They do not line up. It only does when i stretch the browser out to 1920px. Anything smaller than that causes it to misalign. Note that I purposely set the image to be at 100% width which I know is not responsive.
I want to keep the effect of the image getting cut off on the right and left of the browser. Ideally I'd like both images to be centered and aligned when I decrease the size of the browser.
Here is the Github link:
https://gist.github.com/siravani/71b8d447acaca8b34acfcab82af58c06
If you added a fiddle that would have been a lot easier but all you need to do is add background-size:cover to #flesh css rule
html, body, #flesh {
position: relative;
margin: 0;
height: auto;
max-width: 100%;
background: url("http://www2.yapstone.com/l/109192/2017-04-04/4c61s2/109192/37539/buildings.jpg") no-repeat;
background-position: center;
background-size:cover;
}
this way your background image will fit in container and will match with the original image.
Here is a working fiddle https://jsfiddle.net/w2jjaLn5/
How can I make it so that a 100 by 100 image repeats itself all throughout the webpage. I want the image to duplicate itself and fill the screen.
for example lets say I had this picture:
and I wanted it to look like this:
The spacing doesn't matter, but how would I do this?
You would use a repeating background image in CSS. Then you can control the size of the image with background-size.
body {
background: url('https://i.stack.imgur.com/LtCRM.png') center center repeat;
background-size: 2em;
}
CodePen: http://codepen.io/oculusriff/pen/VmZdzg
Edit: As per nicovank's comment - if you are new to CSS, here is the separated version of the above code.
body {
background-image: url('https://i.stack.imgur.com/LtCRM.png');
background-position: center center;
background-repeat: repeat;
background-size: 4em;
}
This is the closest I got to what I wanted. Sorry for not wording the question right.
https://codepen.io/anon/pen/ZBzRaX
I don't know what is making it repeat, but I think it's this. Now I just have to figure out how to make the button fit the whole screen. The button is only a sliver at the top right now.
document.body.style.background = "url('"+links[i]+"')";
I'm new to Webdev in general and things were going pretty smooth in self study until I hit a slight snag on this one problem I've been having.
For one page on my website, I'm using frames (not iframes, just frames... I realize they're awful I'm just trying to use them for a specific purpose here) and I want an image to scale up completely to fill one frame's height, not just stopping when it fills width. That's already a problem I've seen a few people have, and there is a simple solution I kind of retrofitted onto my code from the people at css-tricks (I expanded the shortform to make it easier for me to understand):
body {
background-image: url('/aboutme/fractal.gif');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And that seems to do the trick just fine! But my problem comes from something more specific: I want the image to show up later on, and have there be no background image to start- just a background colour. I also use code to change the background colour every so often before changing to the image. The problem is that I can't figure out for the life of me how to either change the style to work with background colours or to change the background image set setting to work with the html styling. Everything I've tried has resulted in either a blank screen or incorrect input/timing.
My "set image" code, which is what I used before trying out this new code, and it worked only it set just the width to fill:
function toEuphoria() {
document.body.style.backgroundImage = url('/aboutme/fractal.gif');
}
In short: I am trying to set an image to fill up both width and height, but have it only appear later- and have coloured backgrounds appear beforehand. Sorry if I'm not totally clear, it's really late. Any help at all would be appreciated!
You can apply a background 'color' and 'image' to any element simultaneously, just take that in to account in your javascript;
body{
background: #2c2d2e url('/aboutme/fractal.gif');
background-size: cover;
}
function toEuphoria() {
document.body.style.background = "transparent url('/aboutme/fractal.gif')";
document.body.style.backgroundSize = 'cover';
}
Your background-size will be preserved when you swap from a background-color to a background-image and vis-versa.
EDIT
A js fiddle with randomly changing background (color, image, color) that demonstrates the above. https://jsfiddle.net/u5x87q6y/1/
I am trying to create an irregular border around a div, the div will contain text. I am currently using two different images and making them background on the top and bottom of the div. This method works out pretty well but the problem is the div can grow, i.e. it can have variable width and height depending on its content. So, in this case using images as background to achieve this effect is no longer viable.
Is there any way to create an irregular border using CSS and javascript? Obviously, the border should accommodate variable width and height.
I am trying to achieve something like this, but on all sides.
I'd try background-size:contain using that image and then add some padding too keep the text away. It'll scale but it might look pixelated if the box gets too large. Otherwise, you'd need to make the edges repeatable which is probably near impossible given the image you've supplied.
PS. Reminds me of the days we all wanted rounded corners and now we flat design barely uses the border-radius property.
Use a background image for the div itself and CSS border-image for the borders. Here's an example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image
You can also use 2-3 divs to achieve what you are trying to do. Create an image which has the top decoration you want and set that as the background image. Then get another image with your side design, which is repeatable, but not so small that the pattern becomes apparent, and use that as the image with repeat-y enabled. Something like this
.image-top {
background: img(url) no-repeat;
min-height: 25px;
}
.image-middle {
background: img(url2) repeat-y;
}
<div class="image-top">
</div>
<div class="image-middle">
content goes here
</div>
or
.image-top {
background: img(url) no-repeat;
min-height: 25px;
}
.image-middle {
background: img(url2) repeat-y;
}
.image-bottom {
background: img(url3) no-repeat;
min-height: 25px;
}
<div class="image-top">
</div>
<div class="image-middle">
content goes here
</div>
<div class="image-bottom">
</div>
Ok, to start off, I'm sure out in the internet there is a good tutorial about this, but I can't even manage to "write down" a possible title for the problem, and I apologise for that.
I like a responsive and simple makeup:
<div class="gallery-container">
<img src="/your/image/url.jpg">
<img src="/your/image/url2.jpg">
<img src="/your/image/url3.jpg">
......
</div>
My problem is: I have different aspect ratio images to show off all with the 3:2 aspect ratio.
An easy solution would be to insert the images as a background to the a element with CSS, set it to be centred contained and then, with a simple JS script define a height to be 75% of the a width.
I used this solution before, but this time is not working for me: I need to dynamically insert the images with PHP.
How can I get a similar effect to the above explained CSS technique but with the images declared in the HTML?
UPDATE: something like this: http://jsfiddle.net/fF6GL/ - but I need the above makeup, this one would not work in that case
P.S. if possible, I would like a solution without using a JS library.
If you can put those linked images into a list, this might work:
http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
Ok I got a solution that is working for me, a demo is available here: http://jsfiddle.net/fF6GL/3/
Essentially, I'm just adding the background image on the CSS directly on the HTML:
<div>
</div>
And this is the CSS:
div {
width: 90%;
margin: 0 auto;
}
div a {
display: block;
float: left;
width: 50%;
position: relative;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
For the height, I'm using a small clever trick here:
div a:before {
content: "";
padding-top: 75%;
display: block;
}
This won't work on IE, but sincerely, I don't care.