I am trying to implement something like this letter on an image with blending mode.
Here is my fiddle
<div id="box">
<div id="image">
<img src="https://www.epicurrence.com/images/speakers/julie.jpg" />
</div>
<div id="overlay">J</div>
</div>
Can't make it work.
You are currently using background-blend-mode on your img. background-blend-mode is used to blend multiple background images or colours applied to the same element.
mix-blend-mode allows you to apply blending to arbitrary elements that are stacked. in your case you should be using mix-blend-mode on the top most element (.overlay).
#box {
height: 1000px;
background-color: white;
}
#image img {
position: relative;
}
#overlay {
color: green;
position: absolute;
bottom: -300px;
font-size: 1000px;
text-transform: uppercase;
transition: transform 0.9s ease-in-out;
mix-blend-mode: multiply;
}
<div id="box">
<div id="image">
<img src="https://www.epicurrence.com/images/speakers/julie.jpg" />
</div>
<div id="overlay">J</div>
</div>
Related
I have a problem with a Toggle-Down Content made with only CSS.
I would like to put my trigger button and my content in two differents divs, and i don't know which selectors use. Here is the structure, I would like to have :
<div class="row">
<div class="col-md-12 button">
<!-- My button-->
</div>
<div class="col-md-12 toggle-content">
<!-- My content -->
</div>
And here is actually a snippet I have (it works actually but only if the toggle element is next to the input checkbox.
input {
display: none;
}
label {
cursor: pointer;
background: grey;
}
.test {
-webkit-transition: height .3s ease;
height: 0;
overflow: hidden;
width: 200px;
background: lightgray;
}
#check:checked+.test {
height: 100px;
}
<label for="check">
Click me
</label>
<input id="check" type="checkbox">
<div class="test">
<p>Content</p>
</div>
Thanks a lot in advance if you can help and tell me what selectors or anything what to do ! Have a good day ! =)
After some digging around I actually found a way to do this in CSS. As long as the element is within the same parent element it is possible to do this using the ~selector. It searches for sibling elements inside the container.
input {
display: none;
}
label {
cursor: pointer;
background: grey;
}
.test {
-webkit-transition: height .3s ease;
height: 0;
overflow: hidden;
width: 200px;
background: lightgray;
}
#check:checked ~.test {
height: 100px;
}
<div class="someParent">
<input id="check" type="checkbox"><label for="check">
Click me
</label>
<hr>
<div class="test">
<p>Content</p>
</div>
</div>
I have an element positioned correctly in Chrome (Works fine) but in Safari it's off by 50%. General CSS doesn't stump me but this one does. I built everything in react and that shouldn't really have an impact on the CSS (I'm stating this just for reference).
The code for the problem I'm having is:
margin-left: 50px;
background-color: white;
transform: rotate(120deg);
height: 38px;
width: 38px;
border-radius: 50%;
color: white;
position: absolute;
background: white;
transition: all 250ms;
-webkit-transition: all 250ms;
overflow: hidden;
Edit HTML ADDED
<div>
<div class="jbRhCt" style="align-items: center; position: absolute; width: 100%; margin: 0px; padding: 0px; justify-content: center;">
<div class="dbgKej">
<div class="fCJbKH" style="background: rgb(31, 139, 179);">
<div class="ijNdlz" style="margin-left: 26px;">
</div><div class="hOzhhR" style="margin-left: 72px;">
</div><div class="bPQgoG" style="margin-left: 120px;"></div>
<div class="dMJdoh" style="background: white; transform: rotate(120deg); margin-left: 50px;">
<div class="czTFjn" style="opacity: 1;"></div>
<div class="bbrObs" style="opacity: 1;"></div>
<div class="ftVltL" style="opacity: 1;"></div>
<div class="fqOkrX" style="opacity: 0;"><div class="enUBsj" style="opacity: 0;"></div>
<div class="bSIUmO" style="opacity: 0;"></div></div></div>
<p class="iWgihJ" style="margin-left: -40px; color: white;">The Light!</p>
</div>
</div>
</div>
</div>
It's off by the top and right and am unsure why. For reference, in Chrome this is how it looks (the white moon)
And in Safari it looks like so
Any idea what is going on here?
Hard to tell without the corresponding html and the css for the parent element. Since it's absolutely positioned, maybe try adding right: 0;
If that throws your moon out of the button, use a position: relative; on the parent element.
Different browsers have different initial points for absolute positioning. So specify coordinates, for example: right: 0; top: 0;
I have this code which works fine in Firefox and IE, but not in Chrome. What it does is, it starts a slide image animation, over existing image when the cursor is on it. Is there any part of the code that Chrome does not support?
<td width="214">
<div style="margin-left:19px; margin-top:-8px">
<div class="wrapper">
<img src="icon1.png">
<a href="http://www.somesite.com" target="_blank">
<img id="slide" src="slide_img.png" />
</a>
</div>
</div>
</td>
.wrapper{
position: relative;
overflow: hidden;
width: 197px;
height: 162px;
}
#slide{
position: absolute;
left: -197px;
width: 197px;
height: 162px;
background: transparent;
transition: 0.5s;
}
.wrapper:hover #slide {
transition: 0.3s;
left: 0;
}
The problem was in the first image in the wrapper. Try providing a bacground to the div rather than using the img tag
Fiddle
Modified html
<td width="214">
<div style="margin-left:19px; margin-top:-8px">
<div class="wrapper" >
<a href="http://www.biography.com/imported/images/Biography/Images/Profiles/K/Kaka-559558-1-402.jpg" target="_blank">
<img id="slide" src="http://3.bp.blogspot.com/-9qLJXsHoVag/T_rA4WlE-PI/AAAAAAAAB0I/I4gHxidRYEY/s320/kaka.jpg" />
</a>
</div>
</div>
</td>
and css
.wrapper{
position: relative;
overflow: hidden;
width: 197px;
height: 162px;
background:url('http://www.biography.com/imported/images/Biography/Images/Profiles/K/Kaka-559558-1-402.jpg')
}
You need to give Prefix for this
.cssname
{
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}
There is a div, and an image inside that div, all margin set to 0 - however it keep showing a gab INSIDE the div, not even out side, it's not padding or margins and I can't seem to figure out what it is.
I have tried to change the Div's to sections, give them negative margins, make the height 100% but nothing works!
Here is the link to the site: http://www.webdesignstudents.co.uk/students/loai_shehadeh/1/portfolio.html
You can see the full code by View the Page Source, but here is the HTML I am using is this:
<div class="wrapperB">
<div class="content">
<div id="portfolio-sectionB" class="all">
<div id="grid1"><!--Gird 1-->
<div class="galleryItemB visualIdentity">
<img alt="Brighton and Hove In Bloom Logo" src="portfolio/images/brighton-in-bloom-logo-mockup-1.jpg">
</div>
<div class="galleryItemB visualIdentity">
<img alt="" src="portfolio/images/hovecollege-course-magazine-mockup2.jpg">
<p>Click To View Project</p>
</div>
<div class="galleryItemB visualIdentity">
<img alt="" src="portfolio/images/brighton-pet-show-poster-mockup3.jpg">
<p>Click To View Project</p>
</div>
</div><div id="grid2"><!--Gird 2-->
<div class="galleryItemB visualIdentity">
<img alt="" src="portfolio/images/ambition-world-bussiness-card-mockup.jpg">
<p>Click To View Project</p>
</div>
</div><div id="grid3"><!--Gird 3-->
<div class="galleryItemB visualIdentity">
<img alt="" src="portfolio/images/brighton-pet-show-logo-mockup.jpg">
<p>Click To View Project</p>
</div>
<div class="galleryItemB webDesign visualIdentity">
<img alt="" src="portfolio/images/animal-recuse-group-logo-mockup.jpg">
<p>Click To View Project</p>
</div>
</div>
</div>
</div>
</div>
The CSS
#portfolio-sectionA {
margin: 10px 20px;
}
#portfolio-sectionA a {
color: #CED9E7;
padding: 7px 10px;
margin-left: -1px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#portfolio-sectionA a:hover {
color: #9BAFCE;
}
#portfolio-sectionA a:active, #portfolio-sectionA a.portfolio-sectionAClicked {
color: #4E6C98;
background-color: #3C5476;
cursor: default;
}
/*---Portoflio Page Section B---*/
.galleryItemB {
background-color: green;
position: relative;
}
#portfolio-sectionB .galleryItemB a {
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
background: url(../elements/magnifying-glass.png) center center no-repeat rgba(78,108,152,.85);
cursor: pointer;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter:alpha(opacity=0);
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
#portfolio-sectionB .galleryItemB:hover a {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter:alpha(opacity=100);
}
#portfolio-sectionB .galleryItemB a p{
color: #FFFFFF;
position: absolute; bottom: 15px; right: 20px;
cursor: pointer;
}
Change the styling on the images within the div's to display:block.
Ex:
itemWrapper > img {
display:block;
}
img is inline-lbock element and a is inline element. Hence simple text whitespaces appear between them.
In your CSS file you add paddings, margins and borders and stuff.
Then you have an use all classess in your html file.
This might be one of the divs that causes the problem.
You added the padding and other offsets by including all classes, it includes all css classes.
In your css class you have an #portfolio-sectionB part with offsets.
If you really don't know what it is you could always comment out all the CSS properties in the CSS file and enable them one by one while checking if the bug returns.
And fix the spelling mistakes in your html comments: change Gird into Grid.
I'm not sure if this is what you mean but it seems that the links itself have a padding. This results in a white border around the images.
I am creating a single-page website where my content slides across the page (from left to right, easing in over 1s) when a link is clicked on. Unfortunately, I am having absolutely no luck with getting transitions to work.
I can get the .content class to transition using :hover, but cannot seem to achieve any transition/animation effects otherwise. Ideally, I would like the #home, #portfolio, #contact and #cv to be the elements that slide in, but have had no luck for hours now.
I wonder if it is due to the set up of having a sleeve containing all of my slides?
This is my CSS code for the relevant section:
#sleeve {
position: relative;
top: 35%;
width: 400%;
z-index: 2;
height: 60%;
}
#home, #portfolio, #contact, #cv {
background: aqua;
width: 25%;
margin: 0;
position: relative;
z-index: 2;
float: left;
height: 100%;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#home:target ~ #header #navigation #home,
#portfolio:target ~ #header #navigation #portfolio,
#contact:target ~ #header #navigation #contact ,
#cv:target ~ #header #navigation #cv {
background: white;
margin-left: 0%;
}
.content {
width: 70%;
min-height: 40%;
margin-left: 15%;
margin-right: 15%;
margin-top: 2%;
background-color: white;
z-index: 5;
position: relative;
}
and this is my HTML:
<body>
<div id="header">
<div id="navigation">
<a id="link-home" href="#home"> home </a>
<a id="link-portfolio" href="#portfolio"> portfolio </a>
<a id="link-contact" href="#contact"> contact </a>
<a id="link-cv" href="#cv"> cv </a>
</div>
<h1> ---- :</h1> <h2>portfolio and work</h2>
</div>
<div id="sleeve">
<div id="home">
<div class="content"><p> home</p> </div>
</div>
<div id="portfolio" class="panel"> <p> portfolio </p> </div>
<div id="contact" class="panel"> <p> contact </p> </div>
<div id="cv" class="panel"> <p> cv </p> </div>
</div>
<div id="footer"> copyright ----- 2013 </div>
</body>
I would be eternally grateful for anyone's help!
From the way you have it set up, it looks like you are trying to create a carousel that is responsive? If that's the case you will still need some JS to update the css, like add another class. At the moment there is nothing to transition as your css is not changing.
Check this, it will help you to understand, this is made in Jquery, but you can find another solution more hard coded(if this doesn't solve your problem I can help).
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_trans_reverse
if <a href="#pagetwo" data-transition="slide"> it will slide to the div with id "pagetwo"
if <a href="#pageone" data-transition="slide" data-direction="reverse"> it will do an reverse data-direction and will come back to the div with "pageone" and will slide in the reverse way.
Hope this helps.