logo
down
shadow

How to have different transistions for background-image and text in a div using CSS


How to have different transistions for background-image and text in a div using CSS

By : Sirius
Date : November 16 2020, 06:23 AM
With these it helps You're setting the opacity of #centerpiece div to 0.5 on hover and it's the parent to your a tags. opacity on a parent effects its children so while you're calling 1 on #centerpiece div a it's still inheriting the opacity: 0.5 from its parent. You could set #centerpiece div to 0.5 to begin with and increase to 1. Or you could use rgba (although if you have an image rgba won't affect the opacity)
FIDDLE
code :
<div class="container">
  <div class="overlay"><a href="#">Photography</a></div>
</div>
.container{
  background: url("http://www.placecage.com/400/200") no-repeat;
  width: 400px;
  height: 200px;
}

.container:hover .overlay{
  opacity: 1
}

.overlay{
  opacity: 0;
  background: rgba(255,255,255,.8);
  width: 100%;
  height: 100%;
  text-align: center;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

a{
  display: inline-block;
  font-family: "Arial";
  font-size: 24px;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  line-height: 200px;      
}


Share : facebook icon twitter icon
Core Plot CPTextLayer: alignment of text with background image as background color

Core Plot CPTextLayer: alignment of text with background image as background color


By : TrumpetSiege
Date : March 29 2020, 07:55 AM
it helps some times CPTextLayer sizes itself to the size of its text. Resizing it after setting the text is causing the drawing problem. You could make another CPLayer, set your background on that, make your CPTextLayer a sublayer, and position it however you want.
The displacement property works with the contentAnchorPoint property to position the annotation. The contentAnchorPoint is the Core Animation anchor point for your content layer. The displacement is the pixel offset of that point from the anchorPlotPoint of the annotation. For example, if you want your annotation centered at the anchorPlotPoint, set the contentAnchorPoint to CGPointMake(0.5, 0.5) and the displacement to CGPointZero.
css background color for white text with semi-transparent background image

css background color for white text with semi-transparent background image


By : jan hejzlar
Date : March 29 2020, 07:55 AM
may help you . You need an extra image for the non-transparent gradient part of the image. When you add the span to the link you can style the span to have the solid background and a fallback color.
code :
+------------------------------------------------+
| a: Gradient and shadow                         |
| +---------------------------------------------+|
| | a > span: Solid gradient + background color ||
| +---------------------------------------------+|
+------------------------------------------------+
<a id="top-navi-button" href="#"><span>Navigation</span></a>
a#top-navi-button {
  background: url(top-navi-button.png) no-repeat;
}

a#top-navi-button span {
  background: url(top-navi-solid_gradient.png) #00F;
}
Text Fields and text Boxes in webpage is displayed below the web page IMAGE. The image should act as a background image

Text Fields and text Boxes in webpage is displayed below the web page IMAGE. The image should act as a background image


By : Mayloshi-forever And
Date : March 29 2020, 07:55 AM
this will help Your background image is position: static. you should change it to position: absolute; and give also z-index: -1; like this;
code :
<img src="Images/online-employee-registration-portal.jpg" style="height: 800px; width: 1355px; position: absolute; z-index: -1;">
how to create knockout text on a background image so that text can animate over the image

how to create knockout text on a background image so that text can animate over the image


By : BITSBANG
Date : March 29 2020, 07:55 AM
With these it helps
I'd like to have a background image that only shows through knockout text and then have that text animate from the top of the page to the bottom of the page, showing the different parts of the background image as the text moves.
code :
body {
 margin: 0;
 background-color: lightblue;
 overflow: hidden;
}

h1 {
  display: flex;
  justify-content: center;
  height: 100vh;
  margin: auto;
  font-family: 'proxima-nova', sans-serif;
  background: url('https://placekitten.com/g/200/300') no-repeat;
  background-size: cover;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 800;
  padding-top: 0;
  animation: animate 5s linear infinite;
}

@keyframes animate {
  to {
    padding-top: calc(100vh - 6rem);
  }
}
<h1>Text</h1>
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

#screen1 {
  background: url('https://placekitten.com/g/200/300') no-repeat, lightblue;
  background-size: 0; /* don't show the background yet */
  height: 100vh;
  overflow: hidden;
}

#screen1>div {
  background: inherit;
  /* background size is still zero */
  height: 100%;
}

#screen1 h1 {
  display: flex;
  justify-content: center;
  margin: 0;
  background: inherit;
  /* now show the background */
  background-size: cover;
  font-family: 'proxima-nova', sans-serif;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 800;
  padding-top: 0;
  animation: animate 5s linear infinite;
  height: 100%;
}

@keyframes animate {
  to {
    padding-top: calc(100vh - 5rem);
  }
}
<div id="screen1">
  <div>
    <h1>MY TEXT</h1>
  </div>
</div>
background image with text overlay and background color responsive even to 4k screens

background image with text overlay and background color responsive even to 4k screens


By : user3608325
Date : March 29 2020, 07:55 AM
I hope this helps . There are multiple ways to achieve this. I would probably go for a solution like this:
Since you want the background color to have the same height as the background image element, the element with the background color needs to get its height from the background image element. That means, the background image element should be inside the element with the background color. The background image element is a 100% wide, but has a max-width. That way to image never becomes to big and shrinks on smaller screens. You need to use the padding-bottom trick to set the height of the background image element. You could avoid that by using an image element, but that's a question of semantics.
Related Posts Related Posts :
  • Hide specific elements from html using css
  • how to align the arrow in menu item?
  • How do I create a trapezoidal button using CSS?
  • Background position seems to be inaccurate
  • CSS background color is overruled by the background image
  • Oblique or twisted border shape
  • Overflow in div tag doesn't work
  • How to show the vertical image into horizontal manner using HTML and CSS?
  • css3 animation issue move div to left and move it back
  • HTML <code> - get rid of newlines
  • Vertical Align Two Spans (Different font size)
  • Position fixed not working with video poster
  • Having issues placing html buttons side by side in a form
  • how to center text in the middle of the page
  • Sublime Autocompletion for HTML using Emmet inside .sublime-autocompletion file
  • Align bottom wrapped text at the left of an image
  • I'm trying to get :after:hover to work
  • Header and Picture won't Display Correctly
  • SVG stacking, anchor elements, and HTTP fetching
  • Positioning two elements on opposite ends of a 100% with header
  • How to overlay an image inside an image with HTML, CSS
  • Selected date isn't kept in select box
  • How to change background colour of entire div on hover?
  • Two gradients with two distinct sections with just one div element
  • Indent even rows of hexagons in CSS
  • Unwanted filled letters in webpage
  • Mask password character size too small
  • Show div #2 while hovering relative div #1 with translition effect in one container
  • Stacking Tables for a responsive HTML email
  • Hyperlink button created via text/css
  • Checkboxes aligned in a row
  • HTML <title> tag appearing on page
  • I need some assistance with Div Tags
  • CSS Navigation Bar is not horizontal and has wrong colours
  • Background-image width & height 100%
  • Set div height to window height
  • Image/Link alignment issue with bottom navbar
  • CSS hover bubble does not seem out
  • Centering media object on page using Bootstrap
  • Fading out/color overlay on background image
  • Load video after clicking a button or link inside div and stack the trigger, poster image, and video
  • Using Django template tag in <img> tag
  • What are the drawbacks of using 'Mega CSS Sprites' for mobile site?
  • VBScript in HTML (Inline): How to refresh and quit
  • CSS effect works in Chrome but not IE 11
  • HTML Word Wrap is not working properly?
  • Clicking a button within an IE table
  • Have margin between my cells
  • Bootstrap 3 Site layout image grid
  • How can I align divs in a row rather than vertically?
  • How to use emoticon icon in HTML in following scenario?
  • Keep the alignment of my block
  • CSS pseudo selector before with content does not work on html input tag
  • HTML 5 - ie8 moves to quirks mode after page refresh (F5)
  • text-shadow applying to all the text on website?
  • Span tag with display:inline rendering as display:block
  • Center vertically a rotated element
  • Markdown image not shown
  • Text pushed down after inserting images - need to vertically align text
  • Center align an image css when resizing window
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org