I'm trying to achieve a fade on hover effect to the headings using CSS3 with no success. I'm not sure what I did wrong as I am pretty sure that I followed the W3 Schools tutorial.
Could you help me with fixing the code so I can get the fade on hover effect for my headings? The class that I'm trying to apply the hover effect is the .lesson-title, h1.
Meaning it would apply to those headings with names such as "Identify Your Business Opportunity" "Test Your Concept or Product", etc., etc.
They are also links so you could also apply the hover effect to them as another option.
Here is the code:
<html>
<head>
<style>
.cm-lessons {
background: #cecece;
padding: 2em;
max-width: 3000px;
margin: auto;
}
.cm-lessons h1{
font-size: 1.7em;
color: #00455e;
}
.cm-lessons ol, ul {
list-style: none;
}
.cm-lesson-marker span, ol, ul, li {
margin: 0;
padding-bottom: 30px;
border: 0;
font-size: 100%;
color: #00455e;
vertical-align: baseline;
border-bottom: 1px solid #00455e;
}
.last-lesson{
margin: 0;
padding-bottom: 30px;
font-size: 100%;
color: #00455e;
vertical-align: baseline;
border: none;
}
.cm-lesson-marker h1{
font-size: 3em;
}
#more-lessons{
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.lesson-title h1, h2, h3, u, ul{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
color: #00455e;
opacity: 1;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.lesson-title h1:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
ol, ul {
list-style: none;
}
.collapsible {
text-align: center;
color: #00455e;
cursor: pointer;
padding: 30px;
width: 100%;
font-size: 15px;
opacity: 1;
background-color: transparent;
border: none;
}
.active, .collapsible:hover {
opacity: 0.3;
}
</style>
</head>
<div>
<ul class="cm-lessons">
<h1>
For First-Time Business Owners
</h1>
<h3>
Lesson plans: 8
</h3>
<h2 class="lesson-title">
One hour webinar over a duration of 8 weeks.
</h2>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>01</h1>
</span>
<a href="http://www.yantern.com/webinar001-01">
<h1 class="lesson-title">Identify Your Business Opportunity</h1>
</a>
<p>Choosing what kind of business to start with can be a challenging task when confronted with many ideas and opportunities. It’s important to determine where your passions lie and to understand what it takes to start the business. You have to consider your skills and resources. The industry you are entering may be dying or a fast-growing and emerging business.</p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>02</h1>
</span>
<a href="http://www.yantern.com/webinar001-02">
<h1 class="lesson-title">Test Your Concept or Product</h1>
</a>
<p>Concept testing is the process of evaluating likely customer response to a product idea prior to its introduction into the market. Seen through a jobs-to-be-done lens, the goal of concept testing is to validate that a product concept is better than the competing solutions at helping customers to get a job done.</p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker"><h1>03</h1></span>
<a href="http://www.yantern.com/webinar001-03">
<h1 class="lesson-title">Name Your Business</h1>
</a>
<p>Naming your business is important. The right business name will help you distinguish you from a sea of bland competitors, hence provide your customers with a reason to remember and use your company. </p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>04</h1>
</span>
<a href="http://www.yantern.com/webinar001-04">
<h1 class="lesson-title">Build a Business Plan</h1>
</a>
<p>For any start-ups, a business plan is an important tool and it also allows you to gain a better understanding of your industry structure, competitive landscape and the capital requirements of starting the small business. The plan lays out a vision of growth and the steps needed to get there.
</p>
</li>
<button class="collapsible">More lessons</button>
<div id="more-lessons">
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>05</h1>
</span>
<a href="http://www.yantern.com/webinar001-05">
<h1 class="lesson-title">Find Start-Up Money</h1>
</a>
<p>To start a business, you must invest in the business. The journey of finding start-up funds will be different for each individual. Some businesses require small amount or large amount of money to start. Finding the money you need may come from a source you would have never thought of.
</p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker"><h1>06</h1></span>
<a href="http://www.yantern.com/webinar001-06">
<h1 class="lesson-title">Choose a Business Structure</h1>
</a>
<p>Deciding on the structure of your business is not a decision to be taken lightly. Whether you have the LLC, a sole proprietorship or form a corporation; your choice will have an impact on your business liability and taxes. </p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>07</h1>
</span>
<a href="http://www.yantern.com/webinar001-07">
<h1 class="lesson-title">Get Your Business Licenses and Permits</h1>
</a>
<p>Depending on your chosen business structure, may need to register your business with the state authorities. Setting up your small business may require an employer identification number (EIN) which is also used by state taxing authorities to identify businesses. Additional paperwork can entail sales tax licenses and zoning permits. </p>
</li>
<li class="cm-lesson last-lesson">
<span class="cm-lesson-marker">
<h1>08</h1>
</span>
<a href="http://www.yantern.com/webinar001-08">
<h1 class="lesson-title">Get Business Insurance</h1>
</a>
<p>As a new small business owner, you have the responsibility to manage the risks associated with your business. Don't put your new startup at risk without getting the proper small business insurance to protect your company in the event of a disaster or litigation.</p>
</li>
</ul>
</div>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</html>
It will need to stay in HTML format as I will be copying/pasting this into a drag-and-drop website editor. Sorry for the messy code.
Thanks! If you need any more details, reply to me.
I think you've gotten your tag wrong:
.lesson-title h1:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
should be
h1.lesson-title:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
The original selector means on hover for h1 which are a child of .lesson-title.
Whereas what you wanted to say was on hover for h1 which have the class .lesson-title.
Hope that helps!
Super simple: remove your class="lesson-title" from the <h1> tag (and .lesson-title h1:hover CSS) altogether. Then it works (see below).
h1:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>02</h1>
</span>
<a href="http://www.yantern.com/webinar001-02">
<h1>Test Your Concept or Product</h1>
</a>
<p>Concept testing is the process of evaluating likely customer response to a product idea prior to its introduction into the market. Seen through a jobs-to-be-done lens, the goal of concept testing is to validate that a product concept is better than the competing solutions at helping customers to get a job done.</p>
</li>
Related
<div id="56c46f8385953" class="mg_box mg_pre_show col1_3 row1_3 m_col1_2 m_row1_3 mgi_14 mg_pag_1 mg_gallery mg_transitions mg_closed " rel="pid_14" mgi_w="0.333" mgi_h="0.333" mgi_mw="0.5" mgi_mh="0.333" >
<div class="mg_shadow_div">
<div class="img_wrap mg_has_txt_under" >
<div>
<img src="" class="thumb" alt="NYC" fullurl="//testseite24-7.de/wp-content/uploads/ewpt_cache/367x367_85_1_c_FFFFFF_40d34172585f94f3753e12e0e4b051fc.jpg" mobileurl="//testseite24-7.de/wp-content/uploads/ewpt_cache/400x267_85_1_c_FFFFFF_40d34172585f94f3753e12e0e4b051fc.jpg" />
<noscript>
<img src="//testseite24-7.de/wp-content/uploads/ewpt_cache/367x367_85_1_c_FFFFFF_40d34172585f94f3753e12e0e4b051fc.jpg" alt="NYC" />
</noscript>
<div class="overlays">
<div class="mgom_layer mgom_full_img_layer mgom_18_0 ">
</div
><div class="mgom_txt_wrap mgom_18_3 ">
<div class="mgom_layer mgom_descr mgom_18_1">
</div>
<div class="mgom_layer mgom_txt_block mgom_18_2">
</div>
</div>
</div>
'
</div>
</div>
</div>
</div>
Dear community members,
I am not that experienced in coding and I need your help.
I have a portfolio on my site (I am using for this Media Grid – WordPress responsive portfolio and Media Grid Overlay manager add-on). Overlay Manager add-on allows only one overlay-design for the whole single grid (the only manageable feature for each single item is excerpt). I would like to set different overlay colors for the items in one grid (for instance NYC). The developer says it is possible but he does not make such customization (in particular he wrote “However is already feasible, but you need to know CSS and how to inspect code. Each grid item has got an unique selector based on its ID, then isn't particularly difficult to achieve it”). I can define these IDs (for exsample #56c46f838595 for NYC Gallery) and selector (class) for the overlay - in my case the layer with the changing backgound color has a class .mgom_18_0. I have been trying to change a color for one item, but did not succeed in it. All details I add below.
I would appreciate any help in this issue! I thank you in advance!
Best regards, Mike
UPDATE. I added an HTML part. Now I am a bit confused because the ID is changing every time I load the page one more time...
the site where I test the settings http://testseite24-7.de/
CSS part for the overlay type I am using for my test-city-grid.
And here is ELEMENT LEGEND for Plugin.Legend Classes Items
/* ***** 18 - test OVERLAY ***** */
.mgom_18_0 { /* full_img_layer */
top: 0px; left: 0px;
background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);
transition: all 0ms ease 0s;
-webkit-transition: all 0ms ease 0s; /* older webkit */
-ms-transition: all 0ms ease 0s;
z-index: 890;
}
.mg_box:hover .mgom_18_0 {
top: 0px; left: 0px;
background-color: #ffb514;opacity: 0.8; filter: alpha(opacity=80);
}
.mgom_18_1 { /* descr */
text-align: left;
font-size: 14px;
color: #222222;line-height: 19px;
}
.mg_box:hover .mgom_18_1 {
color: #383838;
}
.mgom_18_2 { /* txt_block */
top: 0px; left: 0px;
background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);
transition: all 0ms ease 0s;
-webkit-transition: all 0ms ease 0s; /* older webkit */
-ms-transition: all 0ms ease 0s;
}
.mg_box:hover .mgom_18_2 {
top: 0px; left: 0px;
background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);
}
.mg_box .mgom_18_3.mgom_txt_wrap > *:not(.mgom_txt_block) {
opacity: 0;
filter: alpha(opacity=0);
}
.mg_box:hover .mgom_18_3.mgom_txt_wrap > *:not(.mgom_txt_block) {
opacity: 1;
filter: alpha(opacity=100);
}
.mgom_18_3.mgom_txt_wrap > * {
transition: opacity 0ms ease 0s;
-webkit-transition: opacity 0ms ease 0s;
-ms-transition: opacity 0ms ease 0s;
}
.mgom_18_3.mgom_txt_wrap {
top: 0px; left: 0px;
transition: all 0ms ease 0s;
-webkit-transition: all 0ms ease 0s; /* older webkit */
-ms-transition: all 0ms ease 0s;
}
.mg_box:hover .mgom_18_3.mgom_txt_wrap {
top: 0px; left: 0px;
}
Find a line of code in your html
<div class="mgom_layer mgom_full_img_layer mgom_18_0">
And change it to:
<div class="mgom_layer mgom_full_img_layer mgom_18_0" style="background-color: red">
Then refresh the page. You will see the difference. The best idea is to use id, but it also will help.
I discovered CSS transitions this morning on StackOverflow (I'm a newer web developer, mind you.) and I was trying to re-vamp one of the sites that I'm currently building, by adding a nice fade-in effect on my link color changes & my div hover effects on my page. The effect works very nicely, but I'm noticing a weird delay that hopefully someone can help me out with.
The Problem: When I have nested elements that should both receive a transition, they aren't happening simultaneously, they are waiting for the parent transition to stop and then the child transition begins.
HTML: Note - This is razor text normally, but I have provided the raw HTML without any C# syntax
<div class="image-caption">
<h1>Heading</h1>
<p>Hello world, I am an example paragraph.</p>
<a href="#" target="_self">
<div class="image-link">
Link Text!
</div>
</a>
</div>
CSS / LESS:
I was looking for a way to quickly convert all div & link effects on my site to fade smoothly. I found the code below on StackOverflow and noticed that if I didn't include the :hover & :focus selectors, that all of the links on the page would transition from a pretty large size down to their normal size when the page loaded which looked funny.
div, a, i{
&:hover, &:focus {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
}
And here is the code for the actual styling of the caption.
.image-caption {
//irrelevant CSS removed here
a {
&:hover, &:focus{
color: rgba(19, 56, 97, 1.0);
.image-link{
border-color: rgba(19, 56, 97, 1.0);
}
}
}
}
Use transition property directly on selectors (not on hover and focus states)
div, a, i {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
I was able to make it work by removing the DIV declaration on the global DIV / I / A transition rule, and then creating a couple of mixins to handle independent transition cases like this.
New Global Rule & Mixins:
a, i {
&:hover, &:focus {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
}
.no-fade() {
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
.make-fade() {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
New CSS / LESS to fade nests at the same time: - (for clarification, .image-link is a DIV)
a {
font-family: 'Source Sans Pro';
color: #FEFEFE;
text-transform: uppercase;
font-size: 18px;
&:hover, &:focus {
color: rgba(19, 56, 97, 1.0);
.no-fade();
.image-link {
.make-fade();
border-color: rgba(19, 56, 97, 1.0);
}
}
I'm trying to allow the buttons to not be on top of each other! I am pretty sure there is a simple attribute that I need to put into the CSS Code, but I can't seem to figure it out! Also, is there a way to allow the buttons to fill the entire screen, without a lower scroll bar appearing! I tried to used the 100% part in the padding, but that made the page very large!
<style>
div#menubar2 > a{
font-family:Aria, Helvetica, sans-serif;
font-size: 18px;
background: #333;
padding: 150px 50%;
color:#999;
margin-right: 30px;
margin-bottom: 30px;
margin-top: 30px;
text-decoration:none;
border-radius: 3px;
-o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
div#menubar2 > a:hover{
background: #0099CC;
color:#FFF;
}
</style>
</head>
<body>
<div id="menubar2">
Home
<br>
Shop
<br>
News
<br>
Contact Us
<br>
Support Us!
<br>
Requests
</div>
</body>
</html>
You need to add
display:inline-block;
to your " div#menubar>a " css
Also, it is good practice to use an unordered list for this sort of thing.
As for the second part of your question, you are using a lot of absolute sizing (px) instead of percentages, so you'd probably need some refactoring to make that work. As it stands it'd take some refactoring.
Hey bud welcome to web design. You need to use what we call a float.
Float example.
http://jsfiddle.net/fhu6v5L4/1
I'd advice you to learn using
box-sizing: border-box
It solves a lot of problems by preventing div to get bigger when you add paddings, borders etc.
I searched in SO and Google but I can't find my answer. I want to do a simple thing, but I don't know how to do it. Let me explain:
I'm making a website in HTML and CSS using Bootstrap. In this website, I put some buttons as glyphicons as you can see here: http://i.imgur.com/Jp59ZO1.png (I can't post images yet).
Here is the code of the key button, rest of them is the same:
<a class="button" target="_blank" href="https://keybase.io/adolphenom">
<i class="fa fa-key fa-lg"></i>
</a>
What I want to do is when I put the cursor on the button, it shows a text at bottom of the button (CSS of the text is a color and a font, it doesn't worry me so much right now).
I tried with two or three tutorials I found but It doesn't fit in my requirements.
Could you help me, please?
Thanks in advance!
Now I have another problem. I did what #monkeyinsight said to me (but not with a div but with a span, div breaks every other elemens in the html), and I have another problem:
When I put off the cursor of the icon, but I put on the text (because I go down and not up), this happens: http://i.imgur.com/Ld3AFMC.png Text doesn't disappear :(
Could you help me again, please? Thanks you!
Code of css':
span {
position: relative;
}
a.button {
color: #00628B;
margin-left: 7.5px;
margin-right: 7.5px;
-webkit-transition: color 0.15s ease-in, background 0.15s ease-in;
-moz-transition: color 0.15s ease-in, background 0.15s ease-in;
-ms-transition: color 0.15s ease-in, background 0.15s ease-in;
-o-transition: color 0.15s ease-in, background 0.15s ease-in;
transition: color 0.15s ease-in, background 0.15s ease-in;
}
a.button:hover,
a.button:focus {
color: #575757;
text-decoration: none;
outline: 0;
}
.twitter:hover::after,
.twitter:focus::after {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 60px;
content: "Contact by email";
display: block;
position: absolute;
top: 15px;
left: -65px;
color: #81A594;
text-decoration: none;
}
Span's code:
<span class="twitter">
<a class="button" target="_blank" href="mailto:adolphenom#gmail.com">
<i class="fa fa-envelope-o fa-lg"></i>
</a>
</span>
You should use CSS pseudo element ::after and assign content i.e. {content: 'twitter'}
I have a tool tip, and its basically not working. I did some searching, and the usual response is that you haven't added your position's, however I have those and im truly stumped.
The problem is that in the live demo below, the tool tip from the icons on the left, wont go on top of the content to the right, so I cant see it.
The code mainly lies here;
a.icon {
position: relative;
text-decoration: none;
}
a.icon .tooltip {
-webkit-transition: opacity 0.5s ease 0.2s, left 0.5s ease 0.2s;
-moz-transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
-o-transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
transition: opacity 0.5 ease 0.2s, left 0.5s ease 0.2s;
opacity: 0;
font-size: 11px;
color: #FFFFFF;
background:url('../images/tooltip.png') no-repeat bottom center;
position:absolute;
height: 40px;
line-height: 50px;
left: 100px;
text-align:center;
padding-left:10px;
width: 110px;
display: block;
top: 24px;
z-index: 1000;
}
a.icon:hover .tooltip {
opacity: 1.0;
top:24px;
}
And here is the HTML, with lorem removed;
<div id="icons">
<a href="info page" class="icon" id="info"><span class="tooltip">About Me</span>
<span class="tooltip">Portfolio</span>
<span class="tooltip">Mail</span>
<span class="tooltip">Skype</span>
<span class="tooltip">Twitter</span><!-- Holds the icons for the site -->
</div>
<div id="content">
raesent at quam velit,
</div>
There are span classes referring to tooltip, but this text box wont let me add them as code.
And in short, it doesn't work. I do have the example live here:
Sorry if its a pain to look through the code, im new to this, just starting my first portfolio, and I haven't organized or commented much yet.
Thanks very much.
.......................................
Hi now define your #content position and z-index
as like this
#content{
position:relative;
z-index:-1;
}
or 2nd option
#icons{
position: relative;
z-index: 2;
}
for opacity
write this css
#info:hover, #portfolio:hover, #email:hover, #skype:hover, #twitter:hover{
opacity:1;
}