I am currently using bootstrap and have a 3x3 grid of images. They are 200x200 images and I have looked EVERYWHERE to try and find a way to get an overlay to work on them. I only recently started writing code.
Serenbe.com has exactly what I am looking for about halfway down the page (also a 3x3 grid). The photo brightens, and a logo appears over it when you run your cursor over it. However, I would settle for text/links if a photo is not possible or too complicated. Right now absolutely nothing is working.
My images are arranged in a div within a container. The div takes up 6 columns. And the only styling I have applied is removing the padding so that it touches the edge of the page.
Any suggestions? I am 100% lost here, anything helps.
Thanks!
Have you heard of using hover with your css? :) it's pretty cool and I think that's what the site is using for its images.
An easy way to do what you want for beginners is I would have two pictures. One being the original and the second one with the effect you want. For serenbe it seems like they just added the logo on top using photoshop, then changed the opacity of the photo.
I would then wrap your img in a div and then do something like this in your css:
.customdiv{
height:200px;
width:200px;
background-image:url("imagelinkhere");
}
.customdiv:hover{
background-image:url("newimagehere");
opacity:.5;
}
What this does is change the content in your div to the new picture when you hover over the div, then apply the opacity on the image.
These are just a few tips to help you get started! Good luck
Related
I recently downloaded Flexslider and managed to extend the images, and I have two things I need help with. The first thing is that I want the slider to be full width, and apparently it is being blocked from that in .container by overflow:hidden. If I remove that piece of code, everything expands and the website doesn't look right, but it removes the space between the slider and the screen. Does anyone know how I can fix that?
And my second question is how I make a small space between the slider images. Here is an example of how I want it: Example
Here are my codes:
jsfiddle
Adding margin:0px; on the body fixes the problem.
Could anyone tell me if the scenario below would be achievable with HTML and CSS? My goal is to show the background-image of my HTML body through a clipped div.
Please bear in mind that the final website would be responsive (mobile-first), so the solution should allow the different positioning of the body background images upon resizing.
Basically: is there anyway to show a div as a cutout of the underlying div?
I thought about providing separate background images for each circle to show the illusion that the circles show the body background, but as the design is responsive, alignment issues would quickly occur.
Any insights? Please let me know if more data is necessary. Thanks in advance.
I think this is similar:
http://ask.webatall.com/html5/7619_transparent-half-circle-cut-out-of-a-div.html
and should help? Instead of the shape you'd have to use circles, but the principle should be the same.
Also, if it doesn't work a combination of 2 elements with half circles cut out could achieve the effect.
This answer does a similar thing with another shape:
http://www.samhohce.net/questions/30259780/onhover-button-cut-out-a-triangle-and-show-background
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which is an error. Here is a picture of it:
http://i58.tinypic.com/ju97cl.png
As you can see in that picture, I've boxed around the place where it's disallowing me to place the div class into the stylsheet in white. I've given a working example with the blue box so I'm confused to why it's doing this.
My main question for you today is how do I create buttons directly in the center on the side of my page with CSS or however possible and how to edit these buttons like adding hover animations, visual looks etc? (I'm new to this by the way) Also, I want to lock the scrolling of my page in a certain area like in the picture described:
http://i62.tinypic.com/wmbyw.png
Lastly, I wish to ask how to make my content on the white area transition by sliding to the side for when I click a button to go onto the next page. However possible I would really appreciate if somebody gives me the time for this. Sadly I can't give another image because I don't have 10 reputation. so I hope you can make out what I'm trying to say.
I will be so grateful to anyone who helps me with this.
First off you need to close your .right-menu class with a }.
For effects and animations check out w3schools:
http://www.w3schools.com/css/css3_transitions.asp - transistion property
http://www.w3schools.com/css/css3_animations.asp - animations
Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto.
To prevent scrolling of the body do body {overflow:hidden}
For sliding page content refer to my links above or checkout jQuery
http://www.w3schools.com/jquery/jquery_slide.asp
I've already had a look through some posts and couldn't find what I was after. I'm designing something in PS at the moment and I can foresee an issue when it comes to coding the design into html+css.
Imagine my centre div, it's 960px. It's going to have a semi-transparent .png as a background. The design is “full width” so this div will be contained in a larger div, set to 100% width. This is all ok until I get to the background on this outer div. It's also going to have a .png running the full width of the page. Problem is: I don't want it running through the middle, as it will result in the middle have a double thickness to it, if that makes sense?!
Basically, I need a way to either run a div either side that is elastic, or someway of stopping the background from running across the centre 960px portion of the browser window.
I have NO idea how this can be achieved, apart from using JS to set widths, which I don’t really want to do.
Any ideas?
Ok, I’ve tried to get the basic issue here: http://jsfiddle.net/8Bznc/1/
You can just put a non-transparent background on the center div, so the other background doesn't show through.
See here: http://jsfiddle.net/9bnHD/
Apply the background-image only to the wrapping div.
Alternatively, if the center and sides need to have different images, give the center div a non-transparent background-color as well.
Also, you could fake it by using multiple background-images. Demo
Keep in mind this won't work in old versions of IE, but something as non-essential as background transparency can be excepted as graceful degradation.
I want something that looks like this http://jsfiddle.net/mazlix/VBzau/3/
But I don't want to have to write the border-radius twice (in the div.left in the CSS). I mean, I can, but I just feel like it's wasteful and a sign that I've structured this wrong.
Please let me know if that seems the only way to properly achieve what I want.
Thanks!
border-radius:15px 0 0 15px;
See here:
http://www.css3.info/preview/rounded-border/
I'm about 98% sure that you can't get around that.
1.
So.. I dont know if it's an option, but you could use background image in the outer container. This background would be the desired width and 1px height and hold 2 desired colors side by side. And it would be repeated vertically.
2.
This however is a css3 option: You could use horizontal gradient. Basically the same as the option above, just maybe a tad more flexible as it doesnt use image but css3 gradient as mentioned. http://jsfiddle.net/VBzau/13/
The gradient was made using http://www.colorzilla.com/gradient-editor/
3.
Then theres the good old masking. To basically use an image or images that are negatives of border radius and are the same color as the background where the box is placed.
Much like what is being used here as a fallback in the main content area with the sliding content http://www.apple.com/imac/
4.
I got thinking about how you mentioned about the structure. So heres what i would recommend. http://jsfiddle.net/VBzau/14/
Basically i have put another container wrapping around the main container. Re-applied overflow: hidden; and taken away the radiuses from the left box. Also i moved the image inside the new outer-container.