Background:
I'm trying to create a rotating image banner with several links, each link being different. The FIGURE are set inside a DIV which is nested inside another DIV for centering and positioning purposes.
Current JSFiddle:
Available here without WebKits.
Problem:
Although I tried with several combinations, inside the markup and CSS, never does it trigger the anchor in any of the images (I have not set any effect on hovering yet, not to confuse the code). I deleted the anchors so you can see the base code before the tests I did. It functions now as perfect Pic Slideshow, yes, but that is not the intent.
Need:
To know what to do with an A tag for it to work on each of the images separately, in order to transform the PIC SLIDESHOW into an alternative to a Slider.
Code type restrictions:
I do not wish to use a JQuery in the solution, only CSS, HTML and the smallest JavaScript possible if everything else fails
Many Thanks
Related
I want a popup block to appear when I hover over the image as given in the picture below. How can I achieve this using css.
I have already used css to change the background on hover so how can I make the content appear.
I have been using wordpress but I couldn't find any plugin for the same.
Can anyone help with this one?
Sorry, but you can't do this with only CSS : you have to use JS for it (so if you have not learned it before, I think you should...)
CSS can apply properties on elements "selected" but only that.
If you want to get an information about an element (like whether it is hovered) and apply a propertie to another element depending on the information (like visibility:hidden), you have to use JavaScript.
I'm trying to get create a custom ionic control that will have an autocomplete drop-down. Normally how I would go around this is by creating a nested element of position:relative; followed by an child element with position:absolute;
But for some reason when I tried it on my control in ionic the control get's clipped. Initially I thought to assign a simple z-index would ought to do the the trick, but to my surprise it did not have any effect. Upon some close reading it seems to have something to do with stacking contexts; to make it worse it seems that ionic also marks elements .item-md as position:relative
Any idea how i could make a simple example like this work?
Edit:
I tried to reproduce the case in a simpler setup, but generally, it seems my concept should work. When I put it inside of ionic it gets clipped again.
https://jsfiddle.net/4exLpcv5/
I had a similar situation. Try this for the affected element:
overflow: visible;
After a lot of fiddling around and inspecting the dom tree I was able to partially recreate the problem in jsfiddle. The overflow: visible as mentioned by #willactual is part of the awnser.
Ionic's .item have overflow set on hidden. Which in forces the browser clip out of bound rendering. When I reset the overflow to visible at least in my minimum recreation it behaved as normal. However, trying to bring my example into an actual ionic application, still made the element got clipped.
Now the second part of the solution I stumbled upon by accident is the contain: content. It seems over the years CSS has had some extra properties to act as performance hints. Be it, that ionic actually makes use of these hints and set's the contain property which in result clips the html element.
I already have a piece of css/html code which display 4 images, 2 per row, 2 rows, and logo in the middle of them all.
Now I need to add another set of 4 images right below the first 4 in the same format, with the same logo in the middle
Each image has some text added and a link in it, visible when hoovering over the image.
I've been trying to have it done but can't make it. Was wondering if you're willing to help me out.
My code is here
jsfiddle.net/Cristian_C/b9961995/1/
Thank you
I have no idea how to add the code for a link here
I'm not entirely sure why you're mixing inline styles with stylesheets, but you should (as a rule) avoid it, as it will make maintaining your CSS a nightmare (separation also makes the DOM more readable for you, too).
Because of the code bloat, I'm not sure if you have important styles in there that are essential to your markup; however, there's an easy way to achieve what you want to do by utilizing z-index, float and clear.
See my demo fiddle.
By the look of the posts here I'm in the deep end with the big boys whereas I need the toddlers paddling pool. So apologies if I'm in the wrong place with my basic problem.
I can't get images to float with LightBox [v. 2.6]
I have a sample problem page here - http://quivis.co.uk/PROBLEMS/lightbox-float/index.html
That page has 2 copies of the same image. Both 'work' in the sense that when you click them LightBox does its brilliant thing and fires up correctly, but both image links display incorrectly.
The top image looks as it should i.e. with mouse-over highlights/border colours etc but will not float right. In some browsers there is also a large redundant area to the left that I am unable to remove.
The bottom image floats as I want it to but in the process the image link styling is lost.
As all things are possible it must be possible to combine the look of 1 with the positioning of 2 but I can't see how to do it!
All the related files are within the 'PROBLEMS' folder. Please let me know if I should paste the html or css here.
Any help much appreciated. Thanks, Duncan
Set float:right style to a tag instead of float:right to images.
And there is mis-spelling of class attribute in second a tag, it is mentioned as 'xclass', correct that spelling too.
The problem that i'm having is that I've specified some rollover buttons, and some div id's to control my image positions. however when i make a new div called Text and put some in, this also seems to trigger my rollover buttons? like its using code from the div above it, even though I've used the <div> tags:
http://jsfiddle.net/bq5MR/2/
Your example doesn't display the images.
You haven't closed your <a> tags which may result in the effect area being larger than you expect.
http://validator.w3.org/ - a free HTML validator which can help pinpoint invalid HTML and potential issues.
You're not closing your second 'a' tag. Try closing it and see if that fixes the problem.