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
Related
I was wondering if there was a way to create this style of breadcrumb: http://www.lumosity.com/app/v5/personalization/memory
with only CSS. I've looked online for any articles but all the ones I found were for triangle breadcrumbs. If you guys know any articles please share.
I found a stackoverflow that had the answer if anyone else was looking for it.
Creating CSS3 Circles connected by lines
I just had to change the words i was searching a bit
What about this?
http://jsfiddle.net/8u2Bp/9/
Is purely css, so no code for actually changing div or page or whatever.
For this effect, you have to play with the li:before and the li:after tags, and I used the css counter for the steps as well.
For more info about hte css counter, check this link:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
Hope it helps.
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.
I am trying to make a responsive circle in CSS.
It has to be activated as a link.
When you hover over the circle, the background color needs to change.
In some circles there need to be two text lines.
I found this example script. But unfortunately it is not a link yet:
http://codeitdown.com/css-circles/
As well the following example:
http://codepen.io/anon/pen/cqoFv. Which is not a link yet as well.
So, only the circle needs to be a link.
Your help is appreciated. Thank you very much.
Some like this?
http://codepen.io/anon/pen/zAaGe
Just easy css.
:hover,visited.
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/
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/.