Im making an online game and was making the play button, but had the following issue:
What i want to achieve:
What is happening:
For some reason the background of the text is getting transparent...
HTML:
.wrapper {
display: flex;
justify-content: center;
}
.cta {
display: flex;
padding: 10px 45px;
text-decoration: none;
font-family: "Ceviche One", sans-serif;
font-size: 55px;
color: white;
background: #6225e6;
transition: 1s;
box-shadow: 6px 6px 0 black;
transform: skewX(-15deg);
}
.cta:focus {
outline: none;
}
.cta:hover {
transition: 0.5s;
box-shadow: 10px 10px 0 #fbc638;
}
.cta span:nth-child(2) {
transition: 0.5s;
margin-right: 0px;
}
.cta:hover span:nth-child(2) {
transition: 0.5s;
margin-right: 45px;
}
span {
transform: skewX(15deg);
}
span:nth-child(2) {
width: 20px;
margin-left: 30px;
position: relative;
top: 12%;
}
<div class="wrapper">
<a class="cta" href="#">
<span>JUGAR</span>
</a>
</div>
Any idea how to fix this? It works fine in codepen but not in my project.
Because you are applying the color on class cta which is parent for the text JUGAR. You need to set the color to the span not a tag
I was accidentaly applying a background-color to everything with *{}
Related
So I am trying to put a background image and then center the text to it, but when I change the screen size the text misaligns and moves to the top.
Here's my code:
import React from "react";
import UniversalValues from "../constants.js";
export default function Body() {
return (
<div>
<div className="Container">
<img
className="ResizeImage"
src="https://images.unsplash.com/photo-1533139143976-30918502365b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
alt="Background not loading! X_X"
/>
<div className="TextField">
<h1 className="BGH1">WE DO IT TOGETHER</h1>
<h1 className="BGH1">SO LET'S CREATE</h1>
</div>
</div>
</div>
);
}
Here is my css file:
.App {
font-family: sans-serif;
text-align: center;
}
.BGH1 {
letter-spacing: 0.06em;
font-family: "Cinzel", serif;
font-size: 5rem;
position: relative;
}
.BrandPoint {
font-size: 3rem;
font-family: "Cinzel", serif;
padding-left: 3rem;
}
.Container {
position: relative;
}
.dropbtn {
background: transparent;
color: white;
padding-bottom: 10px;
font-size: 1.2rem;
font-weight: bold;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #33393f;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
transition: transform 0.5s ease;
transform: scale(0.9);
color: #3eccb5;
border: 1px solid;
border-radius: 0.2rem;
border-color: #e0dede;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
transition: transform 0.5s ease;
transform: scale(0.9);
color: #3eccb5;
border: 1px solid;
border-radius: 0.2rem;
border-color: #e0dede;
}
.HeaderElem {
color: white;
padding-bottom: 10px;
font-size: 1.2rem;
}
.HeaderElem:hover {
transition: transform 0.5s ease;
transform: scale(0.9);
color: #3eccb5;
border: 1px solid;
border-radius: 0.2rem;
border-color: #e0dede;
}
.HeaderSeperator {
padding-left: 2rem;
}
.HeadUp {
position: fixed;
top: 0;
left: 0;
}
.ResizeImage {
height: auto;
width: 100%;
margin: 0;
padding: 0;
opacity: 0.99;
}
.TextField {
position: absolute;
bottom: 40%;
left: 35%;
color: white;
padding-left: 20px;
padding-right: 20px;
}
What I am getting vs What I wanted:
I want to pack this whole thing together and so it could just effectively change its shape according to the screen size. I have used Bootstrap but I am new to React and designing my entire website on codesandbox.io. Do let me know the best way to do so.
Thanks in advance.
I think your problem is purely HTML/CSS and not so much React. Thanks for flexbox centering content got a lot easier today.
Change your HTML like this:
<div>
<div class="Container">
<div class="imageContainer"></div>
<div class="TextField">
<h1 class="BGH1">WE DO IT TOGETHER</h1>
<h1 class="BGH1">SO LET'S CREATE</h1>
</div>
</div>
</div>
And your CSS like this:
.Container {
display: flex;
justify-content: center;
align-items: center;
background-color:blue;
position: relative;
color: white;
text-align: center;
height: 300px;
}
.imageContainer {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background-image: url("https://images.unsplash.com/photo-1533139143976-30918502365b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max");
background-position: center center;
}
Here is a fiddle test it: https://jsfiddle.net/gtqna9c1/7/
How it works
Instead of trying to center changing text by absolute positioning it is a lot easier to create conditions where the text is always centered, no matter what. The background image is now a simple background of a div that is covering your whole box.
The fiddle is simplified and coloured for clarity. Feel free to add paddings etc. as you wish.
No, I have no code to demonstrate but I have been wondering: Is it possible to change a font-awesome logo with just transition? Such as: Change the class? I did a little bit of research on w3schools and How can create transition effect in font awesome icon found this link aswell, but they didn't really help and this question has been with me for a long time.
so, the question is: Is it possible to make a logo change (font awesome) with css transition or do I need javascript for it?
in case the question shouldn't be posted here. please tell me where it should so I can move it.
Cheers,
Here you go:
This has been done here: https://codepen.io/toaster99/pen/BpgzQR
HTML:
<div id="container">
<div class="button">
<div class="icons">
<i class="fa fa-apple icon-default"></i>
<i class="fa fa-arrow-circle-down icon-hover"></i>
</div>
Download
</div>
</div>
CSS:
#attribution {
position: fixed;
right: 10px;
bottom: 10px;
color: #FE8989;
z-index: 100;
font-weight: bold;
cursor: pointer;
a {
color: inherit;
text-decoration: inherit;
}
}
#container {
background: linear-gradient(#8affff,#80eded);
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.button {
position: relative;
margin-bottom: 40px;
display: inline-flex;
justify-content: center;
align-items: center;
background: #FE8989;
box-shadow: 0px 0px 0 0px rgba(0,0,0,0);
border-radius: 50px;
width: 25.25rem;
padding: 1rem 0;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 2.75rem;
color: white;
cursor: pointer;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
.icons {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 2.3rem 0 0;
width: 1.25rem;
height: 2.6rem;
i {
position: absolute;
top: 0;
left: 0;
display: block;
}
.icon-default {
transition: opacity .3s, transform .3s;
}
.icon-hover {
transition: opacity .3s, transform .3s;
transform: rotate(-180deg) scale(.5);
opacity: 0;
}
}
&:hover {
transform: scale(1.2);
box-shadow: 20px 15px rgba(0,0,0,0.15);
.icon-hover {
transform: rotate(0deg) scale(1);
opacity: 1;
}
.icon-default {
transform: rotate(180deg) scale(.5);
opacity: 0;
}
}
}
yes, its pretty simple after you see the solution but I was confused too which led me to this post.
css
#keyframes pulse {
0% {
color:transparent;
}
50% {
color: #065803;
}
75% {
color:rgb(113, 139, 0);
}
100% {
color: #065803;
}
0% {
color:rgb(189, 176, 1);
}
}
#linked{
font-size: 16.5rem;
color: white;
display: flex;
justify-content: center;
}
i{
animation: pulse 8s infinite ease;
} ```
HTML
<i id="linked" class="fab fa-linkedin"></i>
</a>
</div>
<div class="col-2-of-2">
<a href="projects.html" target="_blank">
<i id="linked" class="fas fa-code"></i>
</a>
```
I need help rotating text at the same time that the button rotates. For some reason the text is currently disappearing when I hover the mouse over the button. The text should not be disappearing; it should be rotating with the button I'm using Chrome for this project.
http://codepen.io/matosmtz/pen/oXBaQE
HTML
<body>
<div class = "container">
<section class="3d-button">
<h2>Animated Button</h2>
<p class="btn_perspective">
<button class="btn btn-3d btn-3da">Submit</button>
</p>
</section>
</div>
</body>
CSS
html, body {
font-size: 100%;
padding: 0;
margin: 0;
height: 100%;
border: 0;
}
body {
font-family: Lekton;
background: rgb(245,245,245);
}
a {
color: #888;
text-decoration: none;
}
.container {
padding: 0;
margin: 0;
height: 100%;
background: #fff;
position: relative;
}
.container > section {
margin: 0 auto;
padding: 6em 3em;
text-align: center;
}
h2 {
margin: 20px;
text-align: center;
text-transform:uppercase;
letter-spacing: 1px;
font-size: 2em;
}
.btn {
border:none;
position: relative;
background: rgb(245,245,245);
padding: 15px 40px;
display: inline-block;
text-transform: uppercase;
margin: 15px 30px;
color: inherit;
letter-spacing: 2px;
font-size: .9em;
outline: none;
-webkit-transition: all 0.4s;
transition: all 0.4s;
cursor: pointer;
}
.btn:after {
content: "";
position: absolute;
z-index: -1;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.btn_perspective {
-webkit-perspective: 800px;
perspective: 800px;
display: inline-block;
}
.btn-3d {
display: block;
background: #5cbcf6;
color: white;
outline: 1px solid transparent;
transform-style: preserve-3d;
}
.btn-3d:active {
background: #55b7f3;
}
.btn-3da:after {
width: 100%;
height: 42%;
left: 0;
top: -40%;
background: #53a6d7;
transform-origin: 0% 100%;
transform: rotateX(90deg);
}
.btn-3da:hover {
transform: rotateX(-45deg);
}
Here's the updated codepen: http://codepen.io/anon/pen/KpaGYd
Added the following code to your button:
.btn-3da:after {
z-index:1;
}
.btn-3da:hover {
position:relative;
z-index:2;
}
You can take a look into this pure CSS3 solution (works in all major web browsers: DEMO):
/*ROTATE*/
.divRotate
{
-moz-transition : all 0.8s;
-webkit-transition : all 0.8s;
-o-transition : all 0.8s;
transition : all 0.8s;
}
.divRotate:hover
{
-moz-transform : rotate(360deg);
-webkit-transform : rotate(360deg);
-o-transform : rotate(360deg);
transform : rotate(360deg);
}
Add the div element to your HTML and refer the class = 'divRotate'.
Hope this may help. Best regards,
I want to create a translucent background and display some text when user hover on the image like this http://demo.rocknrolladesigns.com/html/jarvis/#team . Is there anyway to make it without jquery?If yes,can anyone please teach me?
.container {
display: inline-block;
overflow: visible;
font-family: sans-serif;
font-size: 1em;
}
.theimg {
display: block;
width: 314px;
height: 223px;
border: solid 1px lightgray;
border-bottom: none;
transition: all .5s ease;
}
.container:hover .theimg {
opacity: 0.3;
}
.thename {
border: solid 1px lightgray;
text-align: center;
padding: 6px 0 6px 0;
transition: all .5s ease;
}
.container:hover .thename {
color: white;
background-color: #ffd600;
}
.thecover {
position: relative;
text-align: center;
top: -200px;
padding: 6px 0 6px 0;
opacity: 0;
transition: all .5s ease;
}
.container:hover .thecover {
top: -170px;
opacity: 1;
}
.thetitle {
font-size: 1.4em;
color: #515a7c;
font-weight: bold;
display: inline;
opacity: 1;
}
Yes, you can make it with CSS only:
<div class=container>
<img class=theimg src='http://demo.rocknrolladesigns.com/html/jarvis/images/team/team1.png' />
<div class=thename>MIKE ROSS</div>
<div class=thecover>
<div class=thetitle>FOUNDER</div>
</div>
</div>
See this and this for more info. jsfiddle
#wrapper span {
visibility:hidden;
position:absolute;
left: 50px;
top: 70px;
}
#wrapper:hover span {
visibility:visible;
}
#wrapper:hover img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<div id="wrapper">
<img src="http://jonamdall.files.wordpress.com/2011/06/small-nyan-cat11.gif" />
<span>This is cat!</span>
</div>
I'm looking for a CSS only solution to fade an image in a back DIV when hovering over any section of the DIV, including DIVs that are in front of it.
Here is what I've been able to build so far: http://jsfiddle.net/kqo10jLb/
The CSS:
#caseouter {
position: relative;
top: 0px;
}
#casewrap2 {
background-color: #000;
}
#casetitle {
font-size: 30px;
width: 100%;
display: block;
text-transform: uppercase;
text-align: center;
padding: 10px 0px 0px 0px;
color: #fff;
margin-bottom: 0px;
}
#casethumb {
width: 100%;
display: block;
margin-bottom: -100px;
opacity: 1;
transition: .2s opacity ease .2s;
height: 100px;
}
#casesecondline {
font-size: 30px;
color: #666;
text-transform: uppercase;
margin: 0 auto;
display: block;
width: 100%;
text-align: center;
color: #fff;
margin-top: -10px;
padding: 0px;
}
#casethumb img {
width: 100%;
}
#casethumb:hover {
opacity: .75;
}
#casetitle:hover ~ #casethumb a {
opacity: .75;
}
#casesecond:hover ~ #casethumb a {
opacity: .75;
}
And the HTML:
<div id="casewrap2">
<div id="casethumb">
<a href="www.google.com">
<img src="http://ringer.tv/wp-content/uploads/2014/08/case_bravo.jpg">
</a>
</div>
</div>
<div id="caseouter">
<a href="www.google.com">
<div id="casetitle">Headline</div>
<div id="casesecondline">Subheadline</div>
</a>
</div>
As you'll see, the back image fades on hover, however, it will not fade when I hover over the headline and subheadline text. I've tried using #casetitle:hover ~ #casethumb a but I'm obviously doing something wrong. Thanks!
Is this what you're after? http://jsfiddle.net/kqo10jLb/1/
I moved the caseouter into the casewrap2 object and changed the hover to this:
#casewrap2:hover #casethumb {
opacity: .75;
}