Imagine this is my header http://freedesignfile.com/upload/2013/01/banner-2.jpg, and the button have to be clickable. I don't want to slice the images and put it into blocks. How can the button be clickable and achieved responsive in the same time??
I am not sure why you want to be so complacent as this can simply be done via Pure CSS only where you can put your image as a background an create this button via CSS and make it clickable.
But, like you have mentioned you do not want to go this way, the only way would be to create another image for a responsive layout and on that image, you need to show/hide based on your requirements and assign a class that changes the click position to match it as per your new image button using image map.
Hope this helps.
Related
I have a gallery plugin on my Shopify website which doesn't have an option to hide an image within the gallery. It does have a custom CSS option within the gallery so I'm trying to find out if anyone knows how to hide a certain image in a gallery using the CSS option.
I want to hide an image within the gallery - not the entire gallery.
The HTML code for the gallery is:
<div class="cz-embed-gallery" id="cz-embed-gallery3926"></div>
The images have a caption, image link, and a title.
Take a look and see if you can help.
Thanks.
You can hide any element by assigning display: none to the class, id or whatever is valid in CSS as an identifier.
Take a look a the basics of CSS.
https://www.w3schools.com/css/
I am trying to create an image map where there is one main image, and when you hover over certain areas different images come up.
Something like this How to apply Hovering on html area tag? but instead of creating an outline it would show different images.
I do not want to usse jQuery and would prefer to rely on CSS and HTML.
Thanks in advance.
You could cover smaller blank images over the large main image and use the hover code separately for each image
The non hover image is a "blank" png and the hover is the desired result
Just use the code for each "blank" image with the main image in the background with z-index of "0"
As said in previous answer, you could do this by using the z-index property. But try setting the main image's z-index as 0, and all small images(that you want to show over main image) as lower than 0.
And finally, activate by swapping the z-index between values lower or higher than 0 on mouse hover.
Hope this helps :)
I am working on a drop down menu that I want to make completely with CSS. Within the link I will not only have text that needs to change when hovered over, but also an image. Changing the color of the text is easy. However I am not sure how to swap the images on the hover...
Here is what I want the result to look like:
Where the arrows will be small images that will switch when the link is hovered over. How do I do this using CSS?
http://www.w3schools.com/css/css_image_sprites.asp
Check Image Sprites - Hover Effect section.
Set the image as a background image to a div (with a set width and height), and you can change that value with css.
Ideally put both graphics into one image, so that you can just shift the background position and you don't get any flicker during the transition (Google "css image sprites").
I believe you'd need to use javascript to change the src of an embedded image.
You could also have two images and use display:block and display:none to show/hide them as appropriate, but I don't think that would be the best approach.
Use CSS background: url()... on an element you deem most applicable. Here is documentation and a walkthrough: https://developer.mozilla.org/en-US/docs/Web/CSS/background.
On a side-note, you may want to consider using a sprite as well, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites
I have a div inside a webpage, below that div there are some images that you can select.
When you select an image you can place it inside the div by clicking on the div.This is working fine.
When someone puts some images inside the div and is done with it, I would like it to be able to save the content of the div, so to save all the images on the position as they were placed, and to merge it into to one image.
Is this possible if so, how could I do something like that?
At the moment I place the images with jQuery inside the div.
Make one image of it is more complicated, you might wanna check http://html2canvas.hertzen.com/ for that. You can also use a canvas.
You can create a canvas, then draw images onto it, then convert to an image and save. This might help. It will only work in browsers which have canvas support.
I have this code: jsfiddle
I want it to look like this, but I do not want the surrounding div. I want to have the form overlay ontop of an image tag, but to look like the second link.
So how can i make the login box over the image without having the image as a background
In order to do what you want you must position the login box absolutely and set a z-index so that it will display properly. Here is a link: link
Personally I prefer to use a container with a background for this sort of thing, as positioning some thing absolutely can be complicated in the rest of the layout. Either way, this link should do what you want.