I wanted to make a landing page for fun, and see how to make it look better, and I figured that I could make a sentence with spinning text in the middle. I've added a GIF to let you guys see what I want it to look like. I did see another post on here similar to mine, but the person that replied had it messed up slightly
I tried using CSS scrolling text, but that made the entire sentence start moving. I tried putting the beginning and end in different DIVs but then they were all seperated.
It needs to be independent element but you can inline-block it. Within this also overflow:hidden element will be a bigger element to be scrolled inside.
h1 {
display: flex;
height: 40px;
/* to center: */
justify-content: center;
}
.scroll-container {
text-align: center;
display: inline-block;
overflow: hidden;
position: relative;
height: 40px;
/* border: 1px solid red; */
margin-left: 10px;
margin-right: 10px;
}
.text-inside .item {
height: 40px;
}
.text-inside {
margin-top: 0;
transition: 500ms;
animation: 3s infinite test;
}
#keyframes test {
0% {
margin-top: 0;
}
25% {
margin-top: 0;
}
50% {
margin-top: -40px;
}
100% {
margin-top: -80px;
}
}
<div style="inline-block">
<h1>Welcome to
<div class="scroll-container">
<div class="text-inside">
<div class="item">Paris</div>
<div class="item">Frankfurt</div>
<div class="item">Milano</div>
</div>
</div>, Joshua
</h1>
Related
I am making a personal site about Boy Scout merit badges. I have a page with a background image where I put up a CSS grid containing cards, each of which is about a different badge. The card shows the badge emblem and has the title of the badge. When you hover over the card there is a sliding up of white text with a blue background that explains the badge. When you stop hovering, it slides back down.
The effect works for the most part, but there's one small problem. The cards have rounded borders, and when the blue slides down, at the very end of the slide down, the blue extends beyond the edges of the card. It is very distracting. It starts the slide up the same way, but for some reason it's more distracting on the way down than on the way up. Here's what it looks like at that end.
Here is my HTML:
<main class="main--grid-container">
<div class="mb-blocks center rounded-border wrapper">
<img class="mb-emblem" src="https://retailobjects.scoutshop.org/media/catalog/product/cache/15846fcd7c7438adaa15ad763c45b358/1/0/10504.jpg" alt="american heritage badge emblem">
<h4>American Heritage</h4>
<div class="overlay">
<div class="content">
<p>
Scouts learn about American history while working on the American Heritage
merit badge. Topics covered range from the Declaration of Interdependence,
to the history of the US flag, to historic places, to their own family
history. They also learn about careers related to the study of American
heritage.
</p>
</div>
</div>
</div>
</main>
Here is the CSS:
body {
background-color: lightgreen;
}
.mb-emblem {
height: 150px;
}
.main--grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 25px;
padding-left: 25px;
padding-right: 25px;
}
.center {
text-align: center;
}
.rounded-border {
border-radius: 25px;
}
.mb-blocks {
padding: 25px;
background-color: white;
z-index: 2;
}
h4 {
font-size: 24px;
margin: 0;
}
.wrapper {
position: relative;
}
.content {
color: #fff;
font-size: 1em;
padding: 1em;
}
.content span {
font-size: .75em;
display: block;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #003366;
border-radius: 25px;
width: 100%;
height: 0;
transition: .5s ease;
overflow: hidden;
margin: 0;
}
.wrapper:hover .overlay {
height: 100%;
}
I changed the background-image to a background-color and put it in a CodePen to make it easier to see. Here is the CodePen.
Thanks for the help!
All you need to do is add overflow: hidden to the mb-blocks class.
Like this:
.mb-blocks {
padding: 25px;
background-color: white;
z-index: 2;
overflow: hidden;
}
replace this style code to fix the problem.
.mb-blocks {
padding: 25px;
background-color: white;
z-index: 2;
overflow: hidden; /* This is the important part */
}
so I have a div which is a card and content in it. I achieved to make it moves up a bit but the transition property seems to not work.
Here is the HTML code
<div class="card">
<p> Title </p>
</div>
and here is the CSS code
.card:hover {
position: relative;
top: -10px;
transition: 1s;
}
So basically there is multiple cards and it works well every card with the .card class moves up when the mouse is over it, but it moves instantaneously, the transition does not work. Does anyone knows how to fix it? have a great day
This is because you have specified the position and transition only in the :hover block of code, meaning the transition timing is not specified until after the hover has already occurred. In other words, only the item that changes on hover (the top value) should be in the :hover.
Specify the position and transition outside the :hover block, like this for example:
.card {
position: relative;
transition: 1s
}
.card:hover {
top: -10px;
}
You can use transform: translateY
try this
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
border: 1px solid black;
width: 150px;
height: 150px;
cursor: pointer;
transition: all .5s ease-in-out;
}
.box:hover {
transform: translateY(-10px);
}
<div class="box"></div>
Instead of playing with top which requires a positon attribute to move it out of flow, just add a margin to displace the element:
.card:hover {
margin-top: -20px;
margin-bottom: 20px;
transition: 1s;
}
/* for visualization purpose only */
body {
padding-top: 50px;
}
div {
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
height: 40vh;
width: 10vw;
}
<div class="card">Card</div
When hovering over a in html I want to display a text. Right now I have it this way:
echo "<td onmouseover='' style='cursor: pointer; background-color:#ffeb3b' title=$text id=$text></td>";
The problem is that it looks very small and without design.
How could I make it look bigger and with a little look?
I would like to do something similar to this in html.A box that appears on the right
For more information look here
body {
text-align: center;
}
.tooltip {
position: relative;
display: inline-block;
cursor: default;
}
.tooltip .tooltiptext {
visibility: hidden;
padding: 0.25em 0.5em;
background-color: black;
color: #fff;
text-align: center;
border-radius: 0.25em;
white-space: nowrap;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 100%;
transition-property: visibility;
transition-delay: 0s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
transition-delay: 0.3s;
}
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
This is how you can do it. First, create the main element, I'm using a text, and next to it add the text you wish to show on hover. Style everything according to your taste. Make sure you set the display of the extra text to none. Basically, we'll hide it and show it only when someone hovers over the main element.
Now, in the CSS, I've added .Main-Text:hover + .Extra-Text CSS Selector to achieve what we are trying to do. This basically means that when someone hovers on the element with class Main-Text, something will happen to the element with the class Extra-Text.
You can read about this more here.
* {
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
min-height: 100vh;
}
.Main-Text:hover + .Extra-Text {
display: block;
}
.Extra-Text {
background-color: #FFFFFF;
margin-top: 10px;
width: 200px;
border: 2px solid #000000;
padding: 10px;
font-size: 16px;
display: none;
}
<html>
<div>
<p class="Main-Text">
Hover me to know more about me.
</p>
<div class="Extra-Text">
<p>
This is the extra information that will be displayed when the text is hovered.
</p>
</div>
</div>
</html>
I don't think so if this is something you are looking for but it's worth mentioning. You can use the title attribute in the HTML Elements to display some text when the user hovers over the element. Try it yourself. Run the snippet below and hover over the text.
* {
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
min-height: 100vh;
}
<html>
<div>
<p class="Main-Text" title="This is some extra text">
Hover me to know more about me.
</p>
</div>
</html>
So Im trying to do a simple header where I have the text aligned central with a 2px border running underneath this.
The code I have works and should work perfectly on every other browser except firefox which is aligning the border right of the page as if the beginning of the border is aligned in the center. If I remove the text align center the border is placed perfectly but the text is aligned to the left obviously. Why is firefox doing this?
CSS:
.my-title {
position: relative;
margin-bottom: 70px;
padding-bottom: 15px;
}
.my-title:after {
position: absolute;
bottom: 0;
height: 2px;
background-color: #ffd500;
content: "";
width: 100%;
}
.align-center {
text-align: center;
}
Html:
<div class="row">
<div class="col-xs-12">
<hgroup class="my-title align-center">
<h1>Header</h1>
<h2>Sub-Header</h2>
</hgroup>
</div>
</div>
since your pseudo element is in position:absolute; it has no width in the flow of your content and follows text-align:center; set on parent.( as absolute it has, in the flow of content, 0 for heigh and width).
3 possibilities:
add the rule : left:0; no matter what text-align on parent will be, it will be drawn from left coordonates.
add the rule : display:block; so it behaves like a block element and ill ignore the text-align, it will do a break line and will be drawn from left or right (follows the direction/dir of document).
keep it in the flow:
.my-title {
position: relative;
margin-bottom: 70px;
padding-bottom: 15px;
}
.my-title:after {
height: 2px;
background-color: #ffd500;
content: "";
width:100%;
display:inline-block;
vertical-align:bottom;
}
.align-center {
text-align: center;
}
Using property left solved the problem:
.my-title:after {
left: 0;
}
Demo
Try this:
#-moz-document url-prefix()
{
.my-title
{
position: relative;
margin-bottom: 70px;
padding-bottom: 15px;
}
.my-title:after
{
position: absolute;
bottom: 0;
height: 2px;
background-color: #ffd500;
content: "";
width: 100%;
}
.align-center
{
text-align: center;
}
}
I am trying to create a menu that slides up on hover. My problem is that all the links slide up instead of just one at a time.
This is my html
<section id="content">
<div id="stuffhere">asd</div>
</section>
<div id="bottom">
<nav id="links">
hello
every
one
</nav>
</div>
and my css
body,html {
height: 100%;
}
#content {
background: #ccc;
height: 40%;
}
#bottom {
height: 60%;
background: #444;
}
#links {
display: table;
position: absolute;
bottom: 0;
right: 0;
border-spacing: 1em 0;
border-collapse: separate;
}
.mlink {
display: table-cell;
text-align: center;
font-size: 2em;
padding: 0.2em 0.6em;
background: #ccc url('http://images.sodahead.com/polls/004017497/230735835_Emotes_face_wink_icon_answer_1_small.png');
background-repeat: no-repeat;
background-position: 50% 54px;
transition: padding 0.2s linear, background-position 0.4s ease;
}
.mlink:hover {
padding-top: 2em;
background-position: 50% 10px;
}
And here is my fiddle: http://jsfiddle.net/HfX2M/
Any help appreciated :)
Like this?
Fiddle: http://jsfiddle.net/SinisterSystems/HfX2M/1/
.mlink {
display: inline;
When you have table-cell selected for your display property, it is assuming it is just that - a table cell in a table row. So when one expands, so do the rest.
Alternatively, you can also use inline-block to make them side by side, but maintain their block status for individual changes.
For more information on display properties, here is the W3 Standards Page for reference.
http://www.w3.org/wiki/CSS/Properties/display
If you want to maintain your padding (it is no longer assuming its a table so you have to make your own, use inline-block and an additional margin.
.mlink {
display: inline-block;
margin-left:.4em;
Fiddle: http://jsfiddle.net/SinisterSystems/HfX2M/3/**