Please take a look at this nav menu
Currently it looks like below
What I'm trying to achieve, is result shown below (I made this on Photoshop)
Is that possible to get this result with CSS3? If yes please help me. Can't figure out, how to get this result
Here we go
http://jsfiddle.net/DBzSD/11/
I have used CSS pseudo elements to display them you can replace with normal elements if you want but that wont be a very wise choice.
Secondly i have used the data-attribute to show the value of the number , you can dynamically change the number with very minimal amount of javascript and that will automatically change the numbers shown in the box :-)
Hope that helps ..
Sorry i failed to find out your hover effects :-(
I can't find where you specify the border on the hover event, but I would make the green line part of the div, and then use the triangle as an image inside the div.
Have a look at this fiddle http://jsfiddle.net/Neograph734/DBzSD/8/
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 recreate the features section:<section id="features"> # https://dreem.com/en/
Basically, I'd like to change the background images and text and iconography.
I've been playing around with it here: https://codepen.io/JordiUp/pen/XZJdQO
But I haven't figured out how to the get the hove transitions working.
Am I able to achive this effect within just a section using HTML and CSS, or am i missing something and need Javascript.
First time posting, Huge thanks in advance.
Hope it will work for you, Please refer this link
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-image-swap-on-hover
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.
I am helping to maintain this website http://www.groupme.my/national/
For certain deals with a long list of options, when you click on the "Buy now" button, the options list popup will be partially covered by the deal below. For example, click on the "Buy now" button for this deal "[55% off] Korean Style Handbag...".
Please note that not every deal comes with options. If there is no options, clicking on "Buyw now" will bring you to the shopping cart directly.
I have tried to put in z-index, but it doesn't seem to do anything.
Please help to check how we can resolve this problem. Thanks.
If I understand your concern correctly, the element that fades in has a bottom edge that is behind the item that is beneath, right?
If this is the problem then z-index isn't going to help you because the thing that is fading in is being attached to a div (and it IS going above it) but it is going to be behind the div that sits on the page *after the one that the fading one is being attached to, so, the fading div is going to be behind the next one, no matter what.
The easiest way to deal with this is to draw them in opposite order, so that the divs are moving towards the zTOP as they go up, or to put it another way, set their z-order in reverse order to how they're drawn, so if you have 10 items, the first one will have a zIndex of 10 and the next one 9 and so on.
The z-index: 0 in content-wrapper-top seems the problem ; try to remove it.
EDIT added after comment : I found this z-index in the generate CSS (line:713):
.content-pane-index {
float: left;
width: 737px;
position: relative;
z-index: 0;<------------------------ HERE
}
Dr.Dredel explained the problem well, but if you don't want to do any reorder HTML, I have a workaround, maybe will be little stupid, but I think it should work anyway, I'll give you idea, I don't have any code to test any code :)
First, your z-index must not have that huge numbers, like 1000 then 50000! use smaller units like 5 10 15 and so, my code will work if you did that first, I used the largest number that must be on the page.
I'll use jQuery, for Buy Now button, add this code after show pop code:
$(this).parent().parent().parent().parent().parent().parent().css("z-index","999");
This code means find parent if buynow a tag and parent of the parent of a tag and so to div that have content-pane-index class name and add z-index for max.
you maybe can use this code instead too:
$(this).parents(".content-pane-index").css("z-index","999");
for close button you need to restore z-index that you added before, so add this code too after closing pop code:
$(this).parent().parent().parent().parent().parent().parent().parent().css("z-index","0");
or
$(this).parents(".content-pane-index").css("z-index","0");
I hope you got an idea at least :)
My code maybe need fixes like add or remove one .parent() method, or change selector that used with .parents().
I Love workarounds :P
if you want to show popup remove z-index from your popup CSS, for ex. I'm using z-index: 1000 in the other css
But I'm using other CSS for popup so go in popup CSS & find z-index and remove it.
in my header I've got a large image. Above that image I want to place my navigation.
The clue about it: The ul-Navigation-element got a gradient background. But if I hover an li-Navigation-Link I would like to display the underlying image! (Hope that's clear? Otherwise I'll do some photoshop to demonstrate) This should be flexible, meaning not to give each li-Element a specific snippet form the backgroundimage.
I would prefer a JS-solution instead of a messy markup. But I appreciate every possible idea you have on your mind. Maybe I'm just overlooking the most obvious and easy solution..
Best regards (:
Here is an image of what I tried to descripe. Hope it helps:
http://s7.directupload.net/images/110226/pv4v4c5r.jpg
There's no need for JS to do this, simply make it so that when you hover over the li-Navigation-Link, the element doesn't have a background attribute set.
This will create the 'transparency' that you want to achieve.
you can use background:transparent for a:hover. This will show the background.
(for internet explorer you could use filter:alpha(opacity=100) );
Here an example: http://jsfiddle.net/3C9sZ/2/
I just solved my problem with javascript/jquery. It can be found here http://jsfiddle.net/QwJKY/.