Hover feature and Link shifted

Hover feature and Link shifted - css

I am new to coding, and I am making a home page. I was trying to get the black and white hover feature on the images of my home pages. However, when I hover my mouse over the image, it does not work. It is only until you hover to the left of the image that the image will turn from color to BW. Any ideas on how to fix this? Any help is greatly appreciated!
Here is my code:
#font-face {
font-family: "p22-underground";
src: qzo1okq;
}
.container {
position: absolute;
padding-bottom: 0px;
margin-top: -125px;
margin-right: -70px;
float: left;
}
.Marlon {
position: absolute;
margin-top: -275px;
margin-left: 15px;
}
/*B&W*/
.blue {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blue:hover {
-webkit-filter: grayscale(100%);
}
.blue {
position: relative;
background-position: left top;
margin-top: 120px;
margin-left: -250px;
max-width:100%;
height:auto;
text-align: center;
}
/*B&W*/
.Tammy {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Tammy:hover {
-webkit-filter: grayscale(100%);
display: block;
}
.Tammy {
position: relative;
background-position: left top;
margin-top: -5px;
margin-left: -250px;
max-width:100%;
height:auto;
text-align: center;
}
/*B&W*/
.Tacos {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Tacos:hover {
-webkit-filter: grayscale(100%);
}
.Tacos {
position: relative;
background-position: center;
margin-top: -623px;
margin-left: 100px;
max-width:100%;
text-align: center;
}
/*B&W*/
.Glasses {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Glasses:hover {
-webkit-filter: grayscale(100%);
}
.Glasses {
position: relative;
background-position: center;
margin-top: -5px;
margin-left: 100px;
max-width:100%;
height:auto;
text-align: center;
}
/*B&W*/
.Door {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Door:hover {
-webkit-filter: grayscale(100%);
}
.Door{
position: relative;
background-position: right top;
margin-top: -623px;
Margin-left:700px;
max-width:100%;
height:auto;
text-align: center;
}
.Social {
position: relative;
text-align: center;
inline: block;
padding-bottom: 0px;
top:-25px;
bottom: 0px;
margin:auto;
}
body {
background-image: url("http://ac.aup.edu/~a94241/background.jpeg");
}
ul {
list-style-type: none;
height: 50px;
margin: 150;
padding: 80;
overflow: hidden;
margin-top: 200px;
background-color: black;
font-family: "p22-underground";
font-weight: "500";
font-size: 150%;
}
li {
float: none;
color: "#fcf8de";
position: relative;
display: inline-block;
bottom: 12px;
margin-left: 10px;
margin-right: 10px;
}
li a {
display: block;
color: "#fcf8de";
text-align: center;
padding: 14px 16px;
margin-left: 5px;
}
footer {
height:10px;
padding: 20px;
margin-top:100px;
text-align:left;
vertical-align:middle;
padding-top: 14px;
background-color: black;
font-family: "p22-underground";
font-weight: "300";
position:static;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://use.typekit.net/qzo1okq.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<div class="container">
<a href="http://ac.aup.edu/~a94241/Marlon Coding.html">
<img src="http://ac.aup.edu/~a94241/cactus.png" alt="Cactus Vector" width="100" height="90">
</a>
</div>
<div class="Marlon">
<a href="http://ac.aup.edu/~a94241/Marlon Coding.html">
<img src="http://ac.aup.edu/~a94241/Marlon Vector.png" alt="Marlon Vector" width="450" height="550">
</a>
</div>
<ul>
<center>
<h1 style="font-p22-underground-sc, sans-serif;font-style:normal; font-weight:500; font-size:80% "</h1>
<li>PHILOSOPHIE</li>
<li>MENU</li>
<li>NOUS TROUVER</li>
<li>AVIS</li>
<li>CONTACT
</li>
</ul>
</center>
<div class="opacity">
<div class="blue">
<a href="http://ac.aup.edu/~a94241/Philosophie.html">
<img src="http://ac.aup.edu/~a94241/blue car.png" alt="BlueCar" width="300" height="310">
</a>
</div>
<div class="Tammy">
<a href="http://ac.aup.edu/~a94241/Avis.html">
<img src="http://ac.aup.edu/~a94241/tammy Lunch.png" alt="TammyLunch" width="300" height="310">
</a>
</div>
<div class="Tacos">
<a href="http://ac.aup.edu/~a94241/Contact.html">
<img src="http://ac.aup.edu/~a94241/tacos.png" alt="Tacos" width="300" height="310">
</a>
</div>
<div class="Glasses">
<a href="http://ac.aup.edu/~a94241/Menu.html">
<img src="http://ac.aup.edu/~a94241/Glasses.png" alt="Glasses" width="300" height="310">
</a>
</div>
<div class="Door">
<a href="http://ac.aup.edu/~a94241/Nous Trouver.html">
<img src="http://ac.aup.edu/~a94241/door.png" alt="Door" width="300" height="620">
</a>
</div>
</div>
<footer>
<p1><font color="#fcf8de">CALL: 01 40 60 12 12</font></p1>
<div class="Social">
<a href="https://www.facebook.com/restaurantmarlon">
<img src="http://ac.aup.edu/~a94241/facebook.png" alt="Facebook Vector" width="20" height="25">
</a>
<a href="https://www.instagram.com/restaurantmarlon/">
<img src="http://ac.aup.edu/~a94241/instragram.png" alt="Instargram Vector" width="20" height="25">
</a>
</div>
</footer>
</body>
</html>

Related

Is it possible to animate an ::after based on a changing class?

I have a few elements
<div class="nav-link active"><span>Element 1</span></div>
<div class="nav-link"><span>Element 2</span></div>
<div class="nav-link"><span>Element 3</span></div>
where the active would change on click and css to add a red rhombus underneath the active div:
.nav .nav-link.active span::after{
content: "";
width: 120%;
height: 0.14em;
background: red;
transform: skewX(-45deg);
list-style: 0.5em;
display: block;
margin: 0 auto;
position: relative;
left: -20px;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
and would like to change the position of that red rhombus on the .nav-link by having it animate slide in from the left based on if the div contains .active. However adding:
.nav .nav-link span::after{
left: -200px;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
doesn't appear to work. Is this possible or am I taking the wrong approach?

You can used translateX to animated left slide.
.nav .nav-link.active span::after{
content: "";
width: 120%;
height: 0.14em;
background: red;
transform: skewX(-45deg) translateX(100px);
list-style: 0.5em;
display: block;
margin: 0 auto;
position: relative;
left: -20px;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<div class="nav">
<div class="nav-link active"><span>Element 1</span></div>
<div class="nav-link"><span>Element 2</span></div>
<div class="nav-link"><span>Element 3</span></div>
</div>

My elements in a menu seem to have no width?

see this codepen for a demo
EDIT of course, hard coding a width for an element is no solution. It should be just the size of the actual title.
HTML
<br/>
<nav class="navigation">
<div class="navfake"></div>
<div class="singleelement">
<div class="container">
<div class="title">Test title 2</div>
<div class="titlepicture">some picture</div>
</div>
</div>
<div class="singleelement">
<div class="container">
<div class="title">Test title newsfeed super long 1</div>
<div class="titlepicture">some picture</div>
</div>
</div>
</nav>
css
/** the newsfeed and footer */
nav {
width: 100%;
height: 20px;
position: relative;
}
.navfake {
width: 100%;
height: 100%;
background: green;
z-index: 10;
position: relative;
}
.singleelement {
display: inline-block;
height: 60px;
text-align: center;
}
.container {
position: absolute;
top: 0px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
height: 200px;
}
.titlepicture {
position: absolute;
width: 100%;
background-color: red;
z-index: 10;
height: 100px;
overflow: hidden;
}
.container:hover {
top: -80px;
}
.container:hover .titlepicture {
height: 100px;
z-index: 10;
}
.title {
z-index: 555;
position: relative;
height: 20px;
width: 100%;
}
.footer {
position: relative;
z-index: 1000;
background-color: white;
}

The trick was to replace position absolute with position relative
HTML
<nav class="navigation">
<div class="navfake"></div>
<div class="singleelement">
<div class="container">
<div class="title">Test title 2</div>
<div class="titlepicture">some picture</div>
</div>
</div>
<div class="singleelement">
<div class="container">
<div class="title">Test title newsfeed super long 1</div>
<div class="titlepicture">some picture</div>
</div>
</div>
</nav>
<div class="footer">some text blablablablablablabla
<br/>some text blablablablablablabla
<br/>some text
<br/>some text
<br/>some text
<br/>some text
<br/>some text
<br/>xxx
</div>
CSS
/** the newsfeed and footer */
nav {
width: 100%;
height: 20px;
}
.navfake {
width: 100%;
height: 100%;
background: green;
z-index: 10;
position: relative;
}
.singleelement {
display: inline-block;
height: 60px;
text-align: center;
position: relative;
}
.container {
top: -20px;
position: relative; /**changed*/
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
height: 200px;
}
.titlepicture {
position: absolute;
background-color: red;
z-index: 10;
height: 100px;
overflow: hidden;
}
.container:hover {
top: -80px;
}
.container:hover .titlepicture {
height: 100px;
z-index: 10;
}
.title {
z-index: 555;
position: relative;
height: 20px;
width: 100%;
}
.footer {
position: relative;
z-index: 1000;
background-color: white;
}

On .singleelement add some sort of width to it. For example 64px and it will work.
Fiddle: http://jsfiddle.net/7WZk5/

Perhaps this is what you're looking for: http://codepen.io/aytimothy/pen/mlkAh
Have you tried adding the "width:" CSS into your "container" Class?
.container {
position: absolute;
top: 0px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
height: 200px;
width: 50%;
}
Well, 50% since you have two elements. If you want to have different widths for each of them, you could always put the width as a STYLE attribute for each element.

how to add subsmenu on creative css3 animation menus by codrops

I'm using Creative CSS3 Animation Menus by CODROPS which the Demo can be seen HERE
I want to make a subsmenu at Tetapan(setting) when user hover the mouse at it LIKE THIS .
This is my code that I try to put arrow at the subsmenu
This is css code
#font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols/websymbols-regular-webfont.woff') format('woff'),
url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.ca-menu{
padding:0;
margin:5px auto;
width: 145px;
}
.ca-menu li{
width: auto;
height: 50px;
overflow: hidden;
position: relative;
display: block;
background: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;
}
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
color: #333;
text-shadow: 0px 0px 1px #333;
line-height: 25px;
position: absolute;
width: 9px;
left: 2px;
text-align: center;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-content{
position: absolute;
left: 30px;
width: 370px;
height: 60px;
top: 5px;
}
.ca-main{
line-height: 25px;
font-size: 15px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-sub{
font-size: 14px;
color: #666;
}
.ca-menu li:hover{
background-color: #000;
}
.ca-menu li:hover .ca-icon{
color: #f900b0;
font-size: 120px;
opacity: 0.2;
left: -20px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.ca-menu li:hover .ca-main{
color: #f900b0;
opacity: 0.8;
}
.ca-menu li:hover .ca-sub{
color: #fff;
opacity: 0.8;
}
/** Here I add arrow **/
.has-sub>a::after {
content: '';
position: absolute;
top: 20px;
right: 5px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #333;
}
ul li:hover>a::after {
border-left: 4px solid #f900b0;
}
HTML code
<ul class="ca-menu">
<li>
<a href="pagehome.php">
<span class="ca-icon">D</span>
<div class="ca-content">
<h2 class="ca-main">Halaman Utama</h2>
</div>
</a>
</li>
<li>
<a href="addpage.php">
<span class="ca-icon">F</span>
<div class="ca-content">
<h2 class="ca-main">Borang Baru</h2>
</div>
</a>
</li>
<li>
<a href="searchpage.php">
<span class="ca-icon">L</span>
<div class="ca-content">
<h2 class="ca-main">Carian Borang</h2>
</div>
</a>
</li>
<li class='has-sub'>
<a href="settingpage.php">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">Tetapan</h2>
</div>
</a>
<ul>
<li>
<a href="settingpage.php">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">Tetapan</h2>
</div>
</a>
</li>
</ul>
</li>
<li>
<a href="out.php" onClick="return confirm('Anda pasti untuk keluar dari sistem ?');">
<span class="ca-icon">X</span>
<div class="ca-content">
<h2 class="ca-main">Keluar</h2>
</div>
</a>
</li>
</ul>

Text wiggle when using CSS transition

In Chrome and Safari, the text in this code (http://codepen.io/igdaloff/pen/cgCFt) wiggles subtly when hovered. I'd like the text to remain stable throughout the transition.
I've tried several alternative methods to accomplish this same effect (explained in this post), but the wiggle remains.
I need the text to remain vertically centered and the content to be completely fluid (percentages only). As long as those requirements are true, I'm open to any solutions. I'm using the most recent browser versions.
Thanks in advance.

HTML
<div class="work-home">
<ul>
<li>
<a href="">
<img src="..." />
<h4>Goats</h4>
</a>
</li>
</ul>
</div>
CSS
.work-home {
text-align: center;
}
.work-home li {
display: inline-block;
position: relative;
margin: 0 0 2em;
width: 100%;
}
.work-home li:hover a:before {
opacity: 1;
top: 5%;
left: 5%;
right: 5%;
bottom:5%;
}
.work-home li:hover h4 {
opacity:1;
}
.work-home img {
width: 100%;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.work-home a:before {
content:"";
display:block;
opacity: 0;
position: absolute;
margin: 0;
top:0;
right:0;
left:0;
bottom:0;
background-color: rgba(0, 160, 227, 0.88);
-webkit-transition: all linear .3s;
-moz-transition: all linear .3s;
-ms-transition: all linear .3s;
transition: all linear .3s;
}
.work-home h4 {
display: block;
padding: 0;
margin:0;
font-family: helvetica, sans-serif;
font-size: 4em;
color: #ffffff;
position:absolute;
top:50%;
margin-top:-.8em;
text-align:center;
width:100%;
z-index:1;
opacity:0;
-webkit-transition: all linear .3s;
-moz-transition: all linear .3s;
-ms-transition: all linear .3s;
transition: all linear .3s;
}

CSS3 transition changes another elements's margin

I have this HTML document:
<div id="c">
<div class="base">
<div class="cb" id="red" data-color="Red">
</div>
</div>
<div class="base">
<div class="cb" id="green" data-color="Green">
</div>
</div>
<div class="base">
<div class="cb" id="blue" data-color="Blue">
</div>
</div>
</div>

and this is my CSS:
<style type="text/css">
.cb {
display: inline-block;
background-color: #56a100;
width: 70%;
height: 70%;
margin-top: 15%;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cb:hover {
display: inline-block;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
width: 100%;
height: 100%;
margin-top: auto;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.base {
display: inline-block;
width: 50px;
height: 50px;
margin-left: 5px;
margin-top: 20px;
border-style: ridge;
text-align: center;
vertical-align: central;
}
</style>

but when I put mouse on one of the .cb elements the others go down!
you can see Demo Here. Does anybody how to stop the other elements to going down?

Remove display: inline-block; from .base class and make it float to the left float: left;.
Here's fixed demo http://jsfiddle.net/pTCFL/2/

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

Hover feature and Link shifted - css

Related

Is it possible to animate an ::after based on a changing class?

My elements in a menu seem to have no width?

how to add subsmenu on creative css3 animation menus by codrops

Text wiggle when using CSS transition

CSS3 transition changes another elements's margin

Categories

Resources