I'm trying to get display:none to work for smaller screens. But I can't get it to work properly. The class disappears if I minimize the screen on my computer, but not when I check my phone.
I've tried the suggested solution on stack overflow of using display:none!important; to override the display:block in the info class, but that hasn't worked either. I've also tried taking out display:block from the info class but that didn't work. I don't think I can take out the display:block in .tooltip because then it messes with the layout.
HTML:
<div class="container">
<a href="#" class="info" data-tooltip-text="Header
Content."><img src="info_button.png"></img></a>
</div>
CSS:
.info {
display: block;
position: absolute;
top: 18px;
right: 30px;
text-align: right;
margin: 0;
padding: 0;
cursor: pointer;
text-decoration: none;
white-space:pre-wrap;
}
.tooltip {
display: block;
position: relative;
left: 0;
bottom: 120%;
width: auto;
padding: 10px;
background-color: #00DCFF;
color: White;
line-height: normal;
text-transform: none;
font-size: 16px;
opacity: 0;
transform: scaleY(0);
transition: all 0.2s ease;
white-space:pre-wrap;
}
.info:hover .tooltip {
opacity: 1;
transform: scaleY(1);
}
#media screen and (max-width: 768px) {
.info {
display: none!important;
}
}
You need to include the viewport meta tag in the head of your main html file. It looks something like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Note that you can customize a few of the options you see in this tag.
Related
I’ve just started to learn HTML/CSS. My goal is to prepare a parallax effect on my test website. I constructed a code with parallax effect in CSS, but the problem is that the images located under the container is unsmooth during scrolling the page (the image extends and rips).
Please consider that I used border-radius method which rounds corners of the containers under which an images are located. I noted that when I cut border-radius method then the unsmoothing effect doesn’t occur. But my goal is to leave this border-radius method unchanged
I know that I can construct similar parallax effect in JS, but my goal is to understand reason why parallax effect doesn’t work correctly in CSS together with border-radius method.
I focused that the unwanted effect occurs only in the case when the browser page is narrowed. Please see the differences between the effect in Codepen one with code (part of the browser page in which finishing page is showed is narrowed):
https://codepen.io/marartgithub/pen/vYpPEjQ
and second one in full page (the problem doesn’t occur):
https://codepen.io/marartgithub/full/vYpPEjQ
I'm sorry if the problem is not the biggest one and for some of you could be insignificant, but my goal is to understand why not all which I wanted works fine to be better programmer.
I would use a :before pseudo tag to achieve this effect. Here are the changes I made:
I remove the about bg div and set each box to flexbox as that will be a cleaner way to acheive this layout.
Then, I removed the border-radius from .about-us-box and added it to .about-us-box:before. In the :before styling, I set it the size of the parent container (.about-us-box) and then set it to have a border radius. You will see box-shadow attribute as border-radius doesn't curve the inside corner. Box-shadow takes care of that for us.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
/* n a v */
.nav {
height: 50px;
background-color: #333;
text-align: center;
line-height: 50px;
font-size: 0;
}
.nav-item {
display: inline-block;
}
.nav-item a {
padding: 0 50px;
color: whitesmoke;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s;
font-size: 16px;
}
.nav-item a:hover {
color: royalblue;
}
/* h e a d e r */
.header-jpg {
position: relative;
height: 300px;
background-image: url('https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_1280.jpg');
background-size: cover;
background-position: 0 50%;
}
.header-text {
position: absolute;
color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-bg {
position: absolute;
height: 100%;
width: 100%;
}
.header-text h1 {
direction: rtl;
margin-bottom: 10px;
text-transform: lowercase;
letter-spacing: 2px;
text-shadow: 2px 2px 6px gold;
}
/* m a i n */
main {
margin: 50px auto;
width: 1200px;
}
main h2 {
margin-bottom: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-size: 16px;
}
.about-us-box {
position: relative;
height: 300px;
margin: 40px 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
z-index: 0;
}
.about-us-box:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 20px 0;
z-inex: 1;
background-color: transparent;
border-radius: 20px 0 20px 0;
box-shadow: 0 0 0 13px #fff;
}
.top {
background-image: url('https://cdn.pixabay.com/photo/2017/08/06/07/10/coffee-2589761_1280.jpg');
}
.middle {
background-image: url('https://cdn.pixabay.com/photo/2017/06/10/16/19/iphone-2390121_1280.jpg');
}
.bottom {
background-image: url('https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg');
}
.about-us-text {
text-align: center;
color: whitesmoke;
padding: 2rem 1rem;
background-color: black;
}
.about-us-text h3 {
margin-bottom: 10px;
text-transform: uppercase;
}
/* f o o t e r */
footer {
height: 80px;
line-height: 80px;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 20px;
}
.icon-box {
margin-left: 20px;
}
.icon-box a {
margin: 0 5px;
color: #ddd;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}
.icon-box a:hover {
color: royalblue;
}
.ti {
padding-right: 10px;
font-size: 26px;
margin-right: 10px;
}
.elem-main {
width: 300px;
margin: 0 auto;
}
.prices-table {
margin: 0 auto;
}
.prices-table td {
padding: 10px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TASK - WE LOVE COFFEE</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css" />
<link rel="stylesheet" href="./css/style_en.css" />
</head>
<body>
<header>
<div class="header-jpg">
<div class="header-bg"></div>
<div class="header-text">
<h1>Creative design</h1>
<p>With our support you will create a dreamlike website</p>
</div>
</div>
</header>
<nav class="nav">
<ul>
<li class="nav-item">home</li>
<li class="nav-item">services</li>
<li class="nav-item">pricing</li>
<li class="nav-item">contact</li>
</ul>
</nav>
<main>
<h2>About us</h2>
<div class="about-us-box top">
<div class="about-us-text">
<h3>We love coffee</h3>
<p>
We interested in coffe in our team on years. We love his smell and
taste. We love the process on which coffee beans goes through
starting from day of cutting during harvest then heat treatment to
grinding process in our coffee grinder and passing it through a
espresso machine.
</p>
</div>
</div>
<div class="about-us-box middle">
<div class="about-us-text">
<h3>We all are creative</h3>
<p>
Characteristic of our work requires from us to be continously a
creative persons, because of competentive market and our clients
demands which expects from us to provide unconventional solutions
supported theri business.
</p>
</div>
</div>
<div class="about-us-box bottom">
<div class="about-us-text">
<h3>We like our job</h3>
<p>
We are young team of simmilar thingking and creative and full
positive energy persons. We meets as well outside of our job to
receive a good balance between proffesionall acvivity and private
life.
</p>
</div>
</div>
</main>
<footer>
<p>
© 2022 Creative design
<span class="icon-box">
<i class="ti ti-brand-facebook"></i>
<i class="ti ti-brand-twitter"></i>
</span>
</p>
</footer>
</body>
</html>
I have a piece of React code:
<div className="Tooltip-Wrapper" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
{children}
{active && <div className="Tooltip-Tip">{text}</div>}
</div>
and have these classes in a scss file:
.Tooltip-Wrapper {
display: inline-block;
position: relative;
}
.Tooltip-Tip {
position: absolute;
border-radius: 4px;
left: 50%;
transform: translateX(-50%);
padding: 6px;
color: var(--tooltip-text-color);
background: var(--tooltip-background-color);
font-size: 14px;
font-family: sans-serif;
line-height: 1;
z-index: 100;
white-space: nowrap;
}
but the divs do not have this styling on them. What could be the reason? Thanks!
It's probably to do with one of the properties not being available for divs.
don't write "classname" instead of it just write "class", then it might work.
I'm trying to create a responsive design logo, using 2 strings, both slightly transparent. The strings are in different sizes, with the second on top of the first.
I've nearly got what I want (try the HTML below) however I would like the right hand edge of the 2 strings to align - The Div extends to the width of the browser and the overlap changes with the width of the display.
Because I want to give the browser some choices over how it's rendered I would rather not use measurements in pixels.
If it is at all relevant - I plan to add additional elements either side of the Div.
<!DOCTYPE html>
<html>
<head>
<style>
.outerText {
position: relative;
font-family: Arial,sans-serif;
font-weight: 900;
font-size: 800%;
text-align:center;
letter-spacing: -0.1em;
color: red;
opacity: 0.2;
top: 0;
left: 0;
}
.innerText {
position: absolute;
font-family: Arial,sans-serif;
font-weight: 900;
font-size: 600%;
text-align:right;
letter-spacing: -0.1em;
float: right;
color: blue;
opacity: 0.2;
z-index: 1;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
and the result is....<br />
<div style="position:relative">
<span class="outerText">OuterTxt</span>
<span class="innerText">InnerTxt</span>
</div>
<hr />
...nearly right - but the rt edges are not (necessarily) aligned
</body>
</html>
Update: jsfiddle here
You had a typo in your CSS ('postition' instead of 'position'), which was probably confusing things. Also, I think you want to remove the "float: right" once that typo is fixed.
This seems to be what (I think) you wanted:
div { /* make the selector more specific */
height: 150px; /* or whatever's suitable */
}
.outerText {
position: absolute;
bottom: 0;
right: 0;
}
.innerText {
position: absolute;
bottom: 7px; /* adjust as desired to compensate for smaller font size */
right: 0;
}
http://jsfiddle.net/nNMwb/2/
Have a look at Viewport Sized Typography
Experiment with the vw unit, I've found that in your example 28.5vw gives what seems to be the desired result.
.outerText {
position: relative;
font-family: Arial,sans-serif;
font-weight: 900;
font-size: 28.5vw;
text-align:center;
letter-spacing: -0.1em;
color: red;
opacity: 0.2;
top: 0;
left: 0;
}
.innerText {
position: absolute;
font-family: Arial,sans-serif;
font-weight: 900;
font-size: 28.5vw;
text-align:right;
letter-spacing: -0.1em;
float: right;
color: blue;
opacity: 0.2;
z-index: 1;
right: 0;
bottom: 0;
}
example
Embedding the Div in a table cell appears to give me the result I'm looking for - the inner and outer texts are both aligned on the right margin, share the same baseline and don't move relative to each other as the page is resized:
<!DOCTYPE html>
<html>
<head>
<style>
.outerText {
postition: relative;
font-family: Arial,sans-serif;
font-weight: 900;
font-size: 800%;
text-align: right;
letter-spacing: -0.1em;
color: red;
opacity: 0.2;
right: 0;
bottom: 0;
}
.innerText {
position: absolute;
font-family: Arial,sans-serif;
font-weight: 900;
font-size: 600%;
text-align:right;
letter-spacing: -0.1em;
float: right;
color: blue;
opacity: 0.2;
z-index: 1;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
and the result is....<br />
<table>
<tr>
<td>left</td>
<td>
<div style="position:relative">
<span class="outerText">OuterTxt</span>
<span class="innerText">InnerTxt</span>
</div>
</td>
<td>right</td>
</tr>
</table>
<hr />
...yeah!
</body>
</html>
I have a disjointed rollover and I would like to add a timed ease-out (only) effect.
I made a page with just that particular issue isolated, see here:
When hovering over "overview" an over-view image shows up in a defined area and on roll-out the image disappears. All good but I now would like the image to fade-out after half a second, even if the pointer is still hovering over "overview" (not just only when the pointer is out). With other words, every time the visitor hovers over "overview" the image appears for half a second and then fades out.
I'm a newbie. CSS only would be great. I tried webkit ease-out/ease-in but couldn't really get it to show and then ease-out only.
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>raphaelzwyer</title>
<link href="css/raphaelzwyer.css" type="text/css" media="screen" title="raphaelzwyer stylesheet" rel="stylesheet" charset="utf-8"/>
<script type="text/javascript" src="js/raphaelzwyerFive.js"></script>
</head>
<body>
<div id="header">
<ul id="overviewlayer">
<li>
<a href="portfolio.html">
<div id="overviewtext">overview</div>
<div class="overview"><img src="images/overview.png" width="660" height="1284" alt="overviewlayer"/></div>
</a>
</li>
<li id="wordmark"></li>
</ul> <!-- end of overviewlayer -->
</div> <!-- end of header -->
</body>
</html>
The relevant CSS:
#header {
position: relative;
top: 36px;
left: 212px;
width: 660px;
height: 48px;}
#overviewlayer a .overview {
display:none;}
#overviewlayer a:hover .overview {
display: block;
position: absolute;
top: 116px;
left: 0px;
height: 852px;
width: 660px;
padding: 0px;
margin: 0px;
color: #000;
font-size: 11px;
background-color: #FFF;
z-index: +20;}
.overview {
position: relative;
top: 12px;
left: 0px;
height: 852px;
width: 660px;
z-index: +10;}
#overviewtext {
position: absolute;
top: 0px;
width: 100px;
height: 48px;
padding-top: 4px;
border-top-style: solid;
border-top-width: 1px;
z-index: +600;}
a {
text-decoration: none;
color: #a9a9a9;}
a:hover, a:focus {
text-decoration: none;
color: #be1f2d;}
li {
list-style-type: none;
display: inline;}
Perhaps you can use CSS3 animations for this ...
Add this line of code to { #overviewlayer a:hover .overview }
-webkit-animation: fade 1.0s ease-out forwards;
and then add the keyframes to your css.
#-webkit-keyframes fade
{
0% {opacity: 1;}
50% {opacity: 1;}
100% {opacity: 0;}
}
In this case, the image will show up immediately when you hover over 'overview' and then the image will fade out.
Since I've only added -webkit- for this example, don't forget to add the prefixes for Firefox, IE and Opera and keep in mind that this only works in modern browsers.
Hope that helps!
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
I want it to be as simple as this, but I know it isn't:
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
img:hover {
#thisElement {
opacity: 0.3;
filter: alpha(opacity=30);
}
opacity:1;
filter:alpha(opacity=100);
}
So when you hover over img, it changes the opacity of #thisElement to 30% and changes the opacity of the image to 100%. Is there a way to actually do this using only css?
So this is the HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="briefcase.js"></script>
<link rel="stylesheet" type="text/css" href="taskbar.css"/>
<link rel="stylesheet" type="text/css" href="briefcase.css" />
<title>Briefcase</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="mask"></div>
<div class="float">
<div id="album1">Album Title</div>
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
</body>
</html>
And this is the CSS:
body {
font: normal small/3em helvetica, sans-serif;
text-align: left;
letter-spacing: 2px;
font-size: 16px;
margin: 0;
padding: 0;
}
div.gradientTop {
position: absolute;
margin-top: 5px;
z-index: 2;
width: 206px;
height: 30px;
float: left;
background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0))
}
div.gradientBottom {
position: absolute;
margin-bottom: 5px;
z-index: 2;
width: 206px;
height: 120px;
float: left;
bottom: -210px;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}
div.float {
border-right: 1px solid orange;
position: absolute;
z-index: 2;
margin-left: 5px;
margin-top: 5px;
float: left;
width: 200px;
}
div.mask {
position: relative;
z-index: 1;
margin-top: 5px;
float: left;
width: 206px;
height: 805px;
background-color: white;
}
img.left {
z-index: inherit;
margin-bottom: 3px;
float: left;
width: 200px;
min-height: 200px;
/* for modern browsers */
height: auto !important;
/* for modern browsers */
height: 200px;
/* for IE5.x and IE6 */
opacity: 0.4;
filter: alpha(opacity=40)
}
img.left:hover + #album1 {
opacity: .4;
}
img.left:hover {
opacity: 1.0;
}
#album1 {
z-index: 2;
width: 200px;
color: white;
text-align: center;
position: absolute;
background: orange;
top: 70px;
}
The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.
In the case of a descendent:
#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
opacity: 0.3;
}
Which will apply to elements such as:
<div id="parent_element">
<div id="child_element">Content</div>
</div>
For adjacent siblings:
#first_sibling:hover + #second_sibling {
opacity: 0.3;
}
Which works for mark-up such as:
<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>
In both cases the latter element in the selector is the one chosen.
Given your pseudo-code example, you probably want something like:
img:hover + img {
opacity: 0.3;
color: red;
}
JS Fiddle demo.
I know you're probably looking for a pure-css way of doing what you want, but I'd suggest you use HTML+CSS+JS as the wonderful MVC structure that they are.
HTML is your Model, containing your data
CSS is your View, defining how the page should look
JS is your Controller, controlling how the model and view interact.
It's the controlling aspect that should be taken advantage of here. You want to control a view of an item on a user interaction. That's exactly what JS is meant for.
With very minimal JavaScript, you could toggle a class on and off of #thisElement when the img is hovered over. It certainly beats playing CSS selector games, although I'd understand if you're only willing to accept a pure-css answer.