Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I wanted to add CSS to this email icon and once hovered over with the mouse, the icon shifts its position upward a little and from under comes a description of the icon. I have included a before hover and after picture. Any help will be appreciated
There are several things that you should look into that will help achieve the effect you are looking for. The first is the :hover selector:
The :hover selector is used to select elements when you mouse over them.
This allows you to apply certain styles to elements when you hover over them with the mouse.
The next thing I would look into is transition; this allows you to have smooth transitions between either specific states, or all states:
To create a transition effect, you must specify two things:
the CSS property you want to add an effect to
the duration of the effect
Finally, I would put some research into applying styles to child elements and classes; this SO post sums it up pretty well with a thorough issue (as does this one).
The snippet below will produce the effect you desire, but I would heavily recommend you study the HTML and CSS combined and how they work together. It's not the cleanest solution, but it gives you an idea of where to get started. Try playing around with the values to see what changes occur so you can learn more about what each piece is doing.
.container {
width: 100px;
height: 100px;
background-color: #333;
color: #eee;
text-align: center;
cursor: pointer;
}
.container i {
width: 100%;
position: relative;
top: 25%;
font-size: 1.5em;
transition: 0.5s all;
}
.container span {
opacity: 0;
position: relative;
top: 25%;
transition: 0.5s all;
}
.container:hover i {
top: 15%;
font-size: 2em;
color: #fc3;
}
.container:hover span {
opacity: 1;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="container">
<i class="fas fa-mobile icon" aria-hidden="true"></i>
<span>Mobile</span>
</div>
Related
I need to create a "record store". I'm very new to CSS and HTML and hardly know anything in JAVA. This is what I need to create.
When the user hovers over one of these featured records, move that record vertically lower and make it become larger. Also, display information about that record that was not previously visible.
Any help is helpful.
Use :hover.
Regarding the information you want to display, you could put them in another div with display: none and change it to display: block on hover using something like #record:hover #content {}.
<div id="record"></div>
#record {
width: 100px;
height: 100px;
background: grey;
}
#record:hover {
position: relative;
top: 10px;
width: 110px;
height: 110px;
}
https://jsfiddle.net/y5j8rhfL/1/
Try this instead
<div class = "record" ></div>
Now the HTML is ready
.record{
/* Whatever style you've applied here is fine */
transition-duration: .5s;
}
.record:hover{
transform: translateY(15px) scale(1.5);
}
The translateY(15px) is to move it down by 15px
While the scale(1.5) is to make it appear bigger
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am trying to build my first web page and I am only allowed to use HTML and CSS. I have a text inside a div and I want to make it appear from the bottom when the page opens. Is it possible to recreate this effect only using HTML and CSS?
If you cant use javascript for stuff like this, try take a look at css keyframes.
They are used for looped animations and other stuff.
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
If the animation must appear after the page fully loaded then, You must integrate JavaScript because you have to call onload event then run the animation. otherwise is not possible that is bcs the page maybe take too long to load on slow internet connect so the animation won't be consistence.
If you choose this approach. here is an example:
document.onreadystatechange = () =>{
if ( document.readyState === 'complete' ) {
// Add class animation to div element.
}
}
Have a look at this one. You'll get an idea from this one I guess
.item {
width: 300px;
height: 300px;
outline: 1px solid skyblue;
margin: 5px;
text-align: center;
}
.item .content {
position: relative;
top: 270px; /* 270px top + 30px line height = 300px outer container height*/
line-height: 30px;
-webkit-transition: all 1s;
transition: all 1s;
}
.item:hover .content{
top: 135px;
}
<div class="item"><span class="content">dummy text for test</span></div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am working on a dropdown menu for a site with a fairly large header. Inside of the header is a <ul> containing the primary menu, with each menu item revealing a dropdown. The problem I am having is that the primary menu is shorter than the header, so there is a small space the cursor has to travel through where it is not hovering over the primary menu or the dropdown. In this brief space, the dropdown menu disappears. How can I keep this from happening? I cannot move the dropdown up, or it overlaps with the header. I also have been unable to change the height of the <ul> in an effective way.
The site is private, but I have created a jsfiddle displaying the problem I'm having: https://jsfiddle.net/x0hvdaqn/
Edit
I had made the fiddle with a div instead of a ul for simplicity's sake, but when I changed it to a ul it started working. The actual menu I am building is made the same way, but does not work. Why would this be the case?
New fiddle with ul instead of div: https://jsfiddle.net/tgqof8my/
use this code. I hope, you need descreasing your margin in drop. Use this...
#wrapper {
width: 100%;
height: 75px;
background-color: green;
text-align: center;
}
#button {
height: 40px;
width: 25%;
margin: auto;
background-color: yellow;
top: 25px;
position: absolute;
}
#drop {
display: none;
background-color: red;
margin-top: 20px;
}
#button:hover #drop {
display: block;
}
<div id="wrapper">
<div id="button">
Primary Menu Item
<div id="drop">
Dropdown
</div>
</div>
Header
</div>
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 5 years ago.
I am building a store website and I have problem with variations of the products. So I have the main product. I have 3 boxes with variations on color and when I hover them it changes the color, but the update of the site requires from me to change it from hoverable to clickable. It works when I change the CSS from
img:hover
to
img:active
but after the click the color returns to previous one. So can after click of the color to remain there instead of going back to previous color. And can it be done without JAVASCRIPT
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #F4F4F4;
}
.box label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box input {
visibility: hidden;
}
.box input:checked + label {
background-color: red;
}
<div class="box">
<input type="checkbox" id="test">
<label class="color" for="test"></label>
</div>
:active means "while being clicked on", not "has been clicked on in the past". It is designed for such things as creating a 3D button depresses when you click on it effect.
CSS has no means to track state.
You might be able to hack something using :focus, but that is designed to indicate what you will activate if you were to press Enter, so is almost never a good choice for this sort of thing. It also only allows you to have one thing focused at a time.
If you want to track state for interactive things: use JavaScript.
CSS is not designed for that.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
On the bootstrap 'Agency' template found here, on the about section there is a vertical line connecting all of the circle images. I have been looking however I cannot find the style rule or html element which is giving this affect.
Can anyone tell me what is doing this, so I can then modify it (e.g. line length)?
It is a ul element (with the class timeline) styled as follows:
.timeline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 40px;
width: 2px;
margin-left: -1.5px;
background-color: #f1f1f1;
}
Also, as pointed out by #Vucko:
#media (min-width: 768px)
.timeline:before {
left: 50%;
}
Each point in the timeline is an li (the right hand side lis are just given a different class timeline-inverted).
Nice Question.
On the ul with class="timeline" there is a ::before object created in css that's given a gray background color to create that line.
.timeline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 40px;
width: 2px;
margin-left: -1.5px;
background-color: #f1f1f1;
}
This is what I would do: create a div that's only 1px in width and however long you want in height, give it a background color, and you will end up with a vertical line.