So I have an image rollover effect that requires two images to be within a list item. They are then overlaid each other within the CSS and transition on the hover state.
I have some text that needs to underneath each image, but since one of the image is position:absolute it just hangs out behind the image:
I've tried to wrap the text within a paragraph tag, but for some reason Wordpress is stripping them out within the editor (I'm guessing cause it's within a li).
I also tried to implement some line-height as well, but that janks it up too.
Here's a sample of the HTML markup:
<li>
<img class="alignnone size-full wp-image-153" alt="lucas2" src="http://localhost:8888/boost/wp-content/uploads/2013/05/lucas2.png" width="117" height="117" />
<img class="alignnone size-full wp-image-154 top" alt="lucas1" src="http://localhost:8888/boost/wp-content/uploads/2013/05/lucas1.png" width="117" height="117" />
The Dungeon Master
</li>
And here's the CSS:
.crew ul li {
display: inline-block;
list-style: none;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 75px;
font-size: 1.1em;
font-style: italic;
color: #71767d;
font-weight: 300;
position: relative;
width: 117px;
height: 117px;
vertical-align: bottom;
}
.crew ul li img {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position: absolute;
left: 0;
}
.crew ul li img.top:hover {
opacity: 0;
cursor: pointer;
}
Overall, I'm trying to keep it a simple as possible so other users can just go into the editor and insert the images and add the text without having to edit any of the HTML within the text editor. Thanks!
Why do you don't use a top property to move the image and the text able to be seen?
E.g.
.crew ul li img {
top: 10px;
}
Related
This is an example of the page: link
My problem here is that the images rendering changes to be like "image-rendering: pixelated;" while the image is resized (when you hover some image), and when the resize over it changes back to normal.
(You can see this very clear when you hover Youtube for example)
I don't want it to be pixelated, and want the image rendering to be normal through all the mouse-hover.
This is my HTML (Made with React):
<li className="original-icon-li">
<a href={props.hrefProp}>
<img src={"/images/classicLogos/" + props.imageUrl} alt={props.imageUrl} />
</a>
</li>
And the CSS:
.original-icon-li {
margin: 10px;
display: inline-block;
transition: all .5s;
}
.original-icon-li a {
padding: 5px;
display: inline-block;
border: none;
transition: all .5s;
}
.original-icon-li a img {
width: 90px;
height: 90px;
display: block;
transition: all .5s;
}
.original-icon-li a:hover img {
transform: scale(0.88);
}
What do you think is the problem ?
Beginner CSS question here.
I have the home page of a website I'm working on set out perfectly. I have two `divs
#desktop-navbar {
text-transform: uppercase;
width: 100%;
height: 90px;
position: fixed;
z-index:1;
}
#desktop-nav-wrapper {
height: inherit;
padding: 0 45px;
}
#desktop-nav-wrapper nav ul {
float: right;
padding-top: 35px;
font-size: 16px;
}
#desktop-nav-wrapper nav li {
position: relative;
display: inline-block;
padding-left: 25px;
color: #000000;
font-family: Thasadith;
font-weight: 700;
}
#desktop-navbar #mobile-menu-link{
display: none;
}
#desktop-nav-wrapper nav li:hover {
font-weight: 900;
}
#desktop-nav-wrapper.solid {
transition: background-color 1s ease 0s;
background-color: #eeeeee;
}
#desktop-logo.solid-fonts {
transition: color 1s ease 0s;
background: linear-gradient(90deg, #000 100%, #000 0%) fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#desktop-nav-wrapper nav li.solid-fonts {
transition: color 1s ease 0s;
color: #000000;
}
#desktop-nav-wrapper {
font-weight: bold;
font-size: 18vw;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
}
#home {
height: 700px;
position: relative;
}
#home-container {
height: inherit;
width: 100%;
display: flex;
position: absolute;
}
#home-colour-one {
height: inherit;
width: 33%;
background-color: #314455;
}
#home-colour-two {
height: inherit;
width: 67%;
background-color: #dddddd;
}
<div id="desktop-navbar">
<div id="desktop-nav-wrapper">
<nav>
<ul id = "desktop-nav-content">
<li class="desktop-items">Casa</li>
<li class="desktop-items">Sobre Mi</li>
<li class="desktop-items">Servicio</li>
<li class="desktop-items">Galería</li>
<li class="desktop-items">Contacto</li>
<li id="mobile-menu-link"><a>Menu</a></li>
</ul>
</nav>
</div>
</div>
<div id="home">
<div id="home-container">
<div id="home-colour-one">
<h3>Bettoo Kaozink</h3>
</div>
<div id="home-colour-two" class="container">
</div>
</div>
</div>
side by side with different colours (I know I could use one div and use the CSS gradient method, but I want to add some sweet fade-in to both of these divs at a later point).
But I want to place the text on the halfway point between the two divs (so one half is in the blue and the other half is in the grey).
Right now, I only have the text in one div of the home page (home-colour-one), but I'd like it to be spread across the two. Is there a way I can get the text to overflow into the grey div (home-colour-two)? Or just have the text in a separate div and place on the point separating the two divs?
I also know I can have the H3 of Bettoo Kaozink in the nav bar, but that is something I want to avoid. As ideally, I would like Bettoo Kaozink centered vertically in the container.
Cheers
One way to approach this is by using flexbox by adding display: flex to the container. If you haven't learned about how flexbox works, I'd recommend you to read up on this article.
I've created a mini prototype here of what you wanted. There are two things you should do to the JSFiddle in advanced to help you understand the code a bit better:
On line 15 of the CSS code, change the flex-grow property to some other value.
Use JavaScript to center the text relative to the div-container
Once you understand flexbox, it opens a door to so many different options that you can choose from.
I hope that it works out for you. If not, just tell me in the comments.
Honestly the structure of your page, based on what I can understand from here, it's not so solid.
Anyway, just in this context, and if I get right your goal, so having your h3 (or whatever text container you will add then) floating between the two divs [id="home-colour-one" and id="home-colour-two"], and centered vertically, a solution would be adding this ad the end of your CSS:
/* ADD THIS!!!*/
#home-colour-one h3 {
position: absolute;
top:50%; left:16.5%;
transform: translateY(-50%);
}
Here a JS Bin: https://jsbin.com/ralicul/edit?html,css,output
For a web project, I would like to create an animated logo in the top left corner of a website. The logo should animate when the visitor is hovering over it, i.e. when not hovering, the logo should display the abbreviated version of the website's name and on hovering it should animate into the fully spelt out version of the name. Here's a quick demo was done in After Effects which shows what I would like to achieve:
The only time I have ever seen something like this was on this website http://ourplace.studio/, the site of a design studio called 'Our Place', in the top left corner. The logo animated pretty much the same way when hovering over it. But looking into the website's source I could not figure out how it is done. The logo is inside a <div> with an <a> tag which has been assigned a class called animation-link. That is as far as I got.
<div id="logo" class="lma">
<a href="http://ourplace.studio" class="animaition-link">
<span>Our</span> <span>Place</span>
</a>
</div>
It would be fantastic if someone could help me to figure this out. It would be a good learning experience to understand how something like this is done.
You can achieve this using css3 transitions:
transition: width 1s;
I made a fiddle that solves your task: https://jsfiddle.net/jmxLrq4m/
Note that this won't work with dynamic width (width: auto) as the transition needs a fixed start- and end value to animate through. Therefor I gave each span a class and set fixed widths on default and on hovering.
The transition attribute combines all transition-properties, which you could also separate e. g.
transition: width;
transition-duration: 1s;
...
See here for more information about transitions: https://www.w3schools.com/css/css3_transitions.asp
i have made a fiddle for you, i hope that works for you
<div id="logo" class="lma">
<a href="http://ourplace.studio" class="animsition-link">
<span>O<i>ur </i></span><span>P<i>lace</i></span>
</a>
</div>
div#logo a {
font-size: 40px;
color: #333;
text-decoration: none;
}
div#logo span {
transition: all .3s;
overflow: hidden;
display: inline-block;
float: left;
}
div#logo i{
font-style: normal;
max-width: 0;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
transition: all 1s;
}
div#logo:hover i {
max-width: 200px;
}
Hi please check this demo here
https://jsfiddle.net/JentiDabhi/83auj9v8/
HTML:
<div id="logo">
<a href="#" class="animsition-link">
<span>Demo</span><span>Logo</span>
</a>
</div>
CSS:
#logo {
width:210px;
font-size: 40px;
}
#logo span {
display: inline-block;
float: left;
margin-right: 0;
overflow: hidden;
}
#logo span {
transition: all 1s ease 0s;
}
#logo span:nth-child(1) {
padding-top: 1px;
width: 28px;
}
#logo span:nth-child(2) {
padding-top: 1px;
width: 22px;
}
#logo:hover span:nth-child(1), .hmslider-visible #logo span:nth-child(1) {
padding-top: 1px;
width: 100px;
}
#logo:hover span:nth-child(2), .hmslider-visible #logo span:nth-child(2) {
padding-top: 1px;
width: 100px;
}
I have this :hover:
http://jsfiddle.net/andrewhoward_im/hLc42dw3/
<span id="pin1-content" class="pin-content">text</span>
It's working fine.
However, I've added it to a custom WordPress theme — http://www.letsgobucketlisting.com/ — and I can't seem to get it to work.
Maybe there are CSS rules in your website overriding your custom css rules, try this:
.pin-content {
position: absolute;
opacity: 0 !important;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
border-radius: 5px;
margin-left: -50px;
background-color:#333333;
color: #ffffff;
}
#pin1:hover + #pin1-content {
opacity: 1 !important;
}
WordPress has added a <br> between your anchor and the span...
So your adjacent sibling selector will not work.
#pin1:hover + #pin1-content {
opacity: 1;
}
Ive added a <br> to your fiddle so you can see the result.
http://jsfiddle.net/hLc42dw3/1/
Add your anchor and span on a single line or with a html comment between to prevent the additional line-break tags.
<!--
--><span id="pin1-content" class="pin-content">text</span>
So I'm having an issue. I have a header, and text on the header. The headers opacity is 0.55 and the text is wrapped inside of the header class. Now here's the issue, since its inside, the text also gets the opacity applied to it. Here's what it looks like . As you can see the text is kind of light. I've tried applying the opacity to 1.0 on the ui li sector itself, but that hasn't helped either. I've also tried the z-index, and that still hasn't helped.
Here's my HTML
<div class="header">
<ul>
<li>
Email
</li>
<li>
Github
</li>
<li>
Twitter
</li>
</ul>
</div>
And the CSS
.header{
text-align: center;
height: 55px;
width: 100%;
background: #EFEFEF;
opacity: 0.55;
position: fixed;
}
ul li{
display: inline-block;
color: #000;
opacity: 1.0;
font-size: 28px;
font-family: 'Avenir Next';
padding: 10px 35px;
}
And lets not forget the demo. Any ideas?
Instead of using opacity on the header, set the background color to rgba(239,239,239, 0.55) and get rid of the opacity property all together
You can either use #Erik's solution (which is cleaner), or you can also add a separate element behind it: (DEMO)
<div class="header headerbg"></div>
<div class="header">...etc...</div>
CSS:
.headerbg{
background: #EFEFEF;
opacity: 0.55;
}
.header{
text-align: center;
height: 55px;
width: 100%;
position: fixed;
}
This might also be achievable using the :before pseudo-element, to keep the display a bit more separated.