This question already has answers here:
What is the opposite of :hover (on mouse leave)?
(13 answers)
Closed 2 years ago.
I am making a website in which a page needs a hoverbox with cool animations. I quickly wrote the code. But the transition is not working like it should have. It is only working from normal to :hover, not :hover to normal. As soon as I move my mouse somewhere else, my div returns to its normal state without any animations. Does anyone have a solution for this?
Here are my HTML and CSS files -
HTML -
<html>
<head>
<title> Rubik's Point | Home </title>
<link rel = "stylesheet" href = "Styles.css">
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght#0,300;0,700;1,300&display=swap" rel="stylesheet">
</head>
<body>
<div class = "header">
<div class = "logo">
<h1 class = "specialTitle"> RUBIK'S POINT </h1>
</div>
<div class = "navContainer">
<ul>
<li><b> Home </b></li>
<li><b> Tutorials </b></li>
<li><b> Give Us a Feedback </b></li>
<li><b> Contact Us </b></li>
</ul>
</div>
</div>
<div class = "intro">
<div class = "introTextbox">
<h1> Become a Cube Master </h1>
<h3> In this section, you will find many tutorials which will teach you how to solve different types of cube puzzles. </h3>
</div>
</div>
<div class = "mainContent">
<center> <h1> Here are some Popular Tutorials </h1> </center>
<div class = "hoverContainer">
<div class = "hoverbox">
<img src = "F:\Rubiks Point\Images\Tutorials\cube background.jpg" width = "100%" height = "100%"></img>
</div>
<div class = "hoverbox">
<img src = "F:\Rubiks Point\Images\Tutorials\fast solve 2.jpg"></img>
</div>
</div>
</div>
<div class = "footer">
<div class = "colfooter">
<p> Give Us a Feedback > </p>
<p> Learn to Solve the Rubik's Cube > </p>
<p> Learn to Solve the Rubik's Cube Faster > </p>
</div>
<div class = "colfooter">
<p> Contact Us > </p>
<p> Learn Conventional Algorithms > </p>
</div>
</div>
</body>
</html>
CSS -
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
font-family: 'Mulish', sans-serif;
}
.header {
width: 100%;
height: 75px;
background-color: #222222;
color: white;
line-height: 75px;
padding-left: 50px;
padding-right: 100px;
overflow-y: hidden;
position: fixed;
}
.logo {
width: 30%;
float: left;
font-family: "Lulo Clean";
}
.logo a {
text-decoration: none;
color: white;
}
.navContainer {
width: 70%;
list-style-type: none;
float: right;
text-align: right;
}
.navContainer li {
display: inline-block;
padding-left: 50px;
font-size: 20;
}
.navContainer a {
text-decoration: none;
color: white;
}
.navContainer a:hover {
color: orange;
}
.intro {
width: 100%;
height: 850px;
background-color: gray;
color: white;
line-height: 850px;
text-align: right;
background-image: url("F:/Rubiks Point/Images/cube background.jpg");
}
.introTextbox {
width: 40%;
height: 100%;
float: right;
text-align: center;
line-height: 50px;
padding-top: 400px;
margin-right: 100px;
font-size: 20;
font-family: 'Mulish', sans-serif;
}
.mainContent {
width: 100%;
padding-left: 200px;
padding-right: 200px;
padding-top: 50px;
padding-bottom: 75px;
background-color: white;
}
.footer {
width: 100%;
height: 230px;
padding-left: 340px;
padding-right: 440px;
padding-top: 55px;
padding-bottom: 60px;
background-color: #222222;
color: white;
display: flex;
}
.row1 {
display: flex;
padding-top: 125px;
padding-bottom: 50px;
padding-right: 50px;
}
.row2 {
display: flex;
padding-top: 75px;
padding-left: 150px;
padding-right: 200px;
}
.col {
width: 330px;
margin-left: 50px;
text-align: center;
}
.col p {
margin-top: 30px;
}
.colfooter {
padding-left: 100px;
}
.colfooter a {
color: white;
}
.colfooter p {
padding-top: 15px;
}
.specialTitle {
letter-spacing: 10px;
}
.hoverContainer {
width: 100%;
height: 375px;
margin-top: 75px;
display: flex;
}
.hoverbox {
width: 30%;
height: 100%;
margin-left: 10%;
margin-right: 10%;
border-radius: 20px;
text-align: center;
}
.hoverbox img {
width: 100%;
height: 100%;
}
.hoverbox:hover img {
border-radius: 50%;
width: 25%;
height: 25%;
transition: 0.5s ease;
}
#currentPage {
color: orange;
}
Thanks a lot in advanced!
Move the transition: 0.5s ease; setting out of the .hoverbox:hover img rule and put it into the .hoverbox img rule - it needs to be in the default state, not in the hover state.
Related
1 2 I am trying to make the Google Search Page in HTML & CSS. However, when I try to center the Google Logo, the image re-adjusts itself when the device width is changed. I've been stuck in this section for quite a while now, and cannot seem to find any answers to my inquiry. Some assistance would be appreciated.
body {
width: 100%;
max-width: 100%;
background-color: #202124;
overflow: hidden;
}
.navbar {
display: flex;
float: right;
position: relative;
word-spacing: 11px;
padding-top: 13px;
padding-right: 129px;
}
.navbartxt a {
text-decoration: none;
color: white;
font-family: arial, sans-serif;
font-size: 13px;
}
.navbartxt a:hover {
text-decoration: underline;
}
.dots {
width: 16px;
position: absolute;
margin-left: 123px;
margin-top: 1px;
}
.pfp {
position: absolute;
border-radius: 100%;
margin-top: -7px;
margin-left: 163px;
}
.searchbox {
display: flex;
position: absolute;
}
.searchsections {
width: 100%;
max-width: 100%;
display: flex;
position: relative;
}
.Google {
position: absolute;
margin-top: 72px;
margin-left: 240px;
}
<nav>
<div class="navbar">
<div class="navbartxt">
Gmail
Images
</div>
<img class="dots" src="/CSS/CSS Images/9 dots.png" />
<img class="pfp" src="/CSS/CSS Images/MyPfpGoogle.png" />
</div>
</nav>
<section class="searchsections">
<div class="Google">
<img src="/CSS/CSS Images/Google Logo.png" />
</div>
</section>
Just replace your .Google class with this :-
.Google {
display: flex;
justify-content: center; /* for horizontal center */
align-items: center; /* For Vertical Center */
}
.Google > img {
display: block;
}
How it works learn Here
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I have 4 posts in my HTML page, they look same except the text content and images and colors of text and background, in the image below you will find the result that i want:
my question is how can i style every post without creating class css for every post i want just change colors
this i my code
.art-content {
position: relative;
}
.art-content img {
width: 100%;
}
.main-content article {
margin-top: 15px;
}
.main-content article:nth-child(2n) {
padding-left: 0px;
}
.main-content article:nth-child(2n+1) {
padding-left: 15px;
padding-right: 0px;
}
.main-content article:nth-child(2n) {
padding-left: 0px;
}
.main-content article:nth-child(2n+1) {
padding-left: 15px;
padding-right: 0px;
}
.rect-date-even {
position: absolute;
display: block;
background-color: #c2022a;
width: 75px;
height: 77px;
top: 0;
left: 0;
text-align: center;
padding: 9px 6px 15px 4px;
}
.rect-date-even span {
font-family: 'Quicksand';
font-size: 20px;
color: white;
padding-bottom: -10px;
}
.rect-info-art {
position: relative;
width: 100%;
height: 105px;
background-color: #dcdcdc;
}
.rect-cat {
position: absolute;
width: 120px;
height: 18px;
background-color: #c2022a;
color: white;
font-family: 'Quicksand';
font-size: 12px;
padding-left: 3px;
top: 10px;
left: 25px;
}
.rect-info-art p {
position: absolute;
font-style: italic;
font-size: 18px;
max-height: 10px;
padding-right: 50px;
top: 30px;
left: 25px;
}
.rect-info-art a {
position: absolute;
color: #c2022a;
font-size: 14px;
text-align: center;
top: 70px;
right: 20px;
}
<section class="col-md-8 col-lg-8 main-content">
<div class="title-section-bg">
<img src="assets/img/ombre-title-section.png">
<div></div>
<span class="icon-megaphone"></span>
<h2>Prochainement a Rabat</h2>
</div>
<article class="col-md-6 col-lg-6 art-content">
<img src="assets/img/IMG-even1.png">
<div class="rect-date-even">
<span>03</span>
<span>AVR</span>
</div>
<div class="rect-info-art">
<div class="rect-cat">Musique du monde</div>
<p>Rihanna en concert à Mawazine 2015</p>
détails <span class="icon-circle-plus"></span>
</div>
</article>
<article class="col-md-6 col-lg-6 art-content">
<img src="assets/img/IMG-even1.png">
<div class="rect-date-even">
<span>03</span>
<span>AVR</span>
</div>
<div class="rect-info-art">
<div class="rect-cat">Musique du monde</div>
<p>Rihanna en concert à Mawazine 2015</p>
détails <span class="icon-circle-plus"></span>
</div>
</article>
</section>
thanks for helping
Use the :nth-of-type(n) pseudo selector to style them individually.
div {
width: 100px;
height: 100px;
margin: 5px;
}
div:nth-of-type(1) p {
background-color: red;
}
div:nth-of-type(2) p {
background-color: blue;
}
div:nth-of-type(3) p {
background-color: yellow;
}
div:nth-of-type(4) p {
background-color: green;
}
<div><p>hello</p></div>
<div><p>hello</p></div>
<div><p>hello</p></div>
<div><p>hello</p></div>
Use e.g.
article:nth-of-type(1) .rect-date-even {
background-color: green;
}
This selects all elements with the class rect-date-even that are descendants to any article that is the first article inside its parent element.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
nth-child (which you have tried) does not take into account element name (or class or whatever) - all it ever asks is
Am I the nth-child of my parent (regardless of element name, class, id, attributes whatever)?
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
I'm having huge problems trying to arrage my DIVs, as I found that this thing is not as simple as it seems, just put a DIV and inside that DIV another 2 and you're done. The image bellow shows how I would want my page to be structured:
sur1.
surf2: surfleft, surfright. surf3. surf4 Where . means another line and , means that DIVs should be one next to another.
And also can't center that image vertical and horizontall middle on surfright from surf 2 parent.
#font-face
{
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1
{
font-size: 2.5em;
margin: 0;
}
p.title2
{
font-size: 3em;
}
.i1
{
height: 400px;
float: right;
display: block;
margin-top: 150px;
}
div.surf1
{
display: block;
background-image: url("surf1.jpg");
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
width: fit-content;
position:absolute;
background: #41c3ac;
height: 600px;
}
div.surfleft {
float:left;
display: block;
width: 45%;
padding-top: 80px;
height: 600px;
background: #8C78B1;
}
div.surfright {
float: right;
background: #ff6b57;
}
div.surf3
{
background: #ff6b57;
height: 600px;
}
div.surf4
{
background: #8C78B1;
height: 600px;
}
div.text1
{
padding-top: 100px;
color: white;
text-align:center;
font-size: 2.5em;
}
div.button
{
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236,229,167,0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover
{
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body
{
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br><br><br><br><br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<div class="surfleft">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surfright">
<img src="console.png" alt="404 Image not Found" height="400px">
</div>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
Please note that you may use correct width values to have fine edges in your design.
div.surf1
{
display: block;
background-color: #cdcdcd;
height: 100px;
}
div.surf2 {
background: #41c3ac;
height: 100px;
}
div.surfleft {
float:left;
display: block;
width: 50%;
height: 100px;
background: #8C78B1;
}
div.surfright {
float: right;
width: 50%
background: #ff6b57;
}
div.surf3
{
background: #ff6b57;
height: 100px;
}
div.surf4
{
background: #8C78B1;
height: 100px;
}
body
{
margin: 0;
font-family: FONT;
color: white;
}
<div class="surf1">
<div class="text1">Surf 1</div>
</div>
<div class="surf2">
<div class="surfleft">Surf left</div>
<div class="surfright">Surf right</div>
</div>
<div class="surf3">Surf 3</div>
<div class="surf4">Surf 4</div>
I am learning HTML,CSS and JAVAScript and I recently wrote a very simple code. It showed everything and was working fine until I added the div class "mainLeft". After that it doesn't show anything except for the code before that class. Can you kindly assist?
Below is the HTML and CSS code;
CSS Code
**CSS Code**
body {
background-color: white;
}
.main h1 {
font-family: Candara;
text-align: center;
color: white;
}
.main {
display: table;
height: 50px;
width: 600px;
margin-left: auto;
margin-right: auto;
background-color: #13b5ea;
}
.SME {
display: table;
position: absolute;
width: 250px;
height: 250px;
left: 50%;
top: 50%;
margin-left: -125px;
margin-top: -125px;
color: #13b5ea;
}
.SME h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.DataAnalysis {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 28%;
margin-left: -100px;
margin-top: -100px;
color: #13b5ea;
}
.DataAnalysis h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.ProdMonitor {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 72%;
margin-left: -100px;
margin-top: -100px;
color: #13b5ea;
}
.ProdMonitor h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.mainLeft h1 {
font-family: Candara;
text-align: center;
color: white;
}
.mainLeft {
display: table;
height: 50px;
width: 600px;
margin-right: auto;
background-color: #13b5ea;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="satmap.css" />
<title>My Home</title>
</head>
<body>
<!--Go bananas!-->
<div class="main">
<h1> XYZ</h1>
</div>
<div class="mainLeft">
<h1> Current Stats </h1>
</div>
<div class="SME">
<h4> My Explorer </h4>
</div>
<div class="DataAnalysis">
<h4> Data Analysis </h4>
</div>
<div class="ProdMonitor">
<h4> Production Monitoring </h4>
</div>
</body>
</html>
first of all, I don't see any div with the class 'mainLeft'. You only have texts in those divs so the reason you can't see anything is because you have this css on your h definitions.
color: white;
Thank you Everyone. I solved it.
I had forgottent to add background-color attribute in CSS.