How to make my text visible over svg image using tailwind css ? I tried using z-index but it didn't worked out ! What should i do ?
my code is as :
<body class="relative">
<svg class="absolute z-10"> some path </svg>
<div class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8 z-20">
some code here
</div>
</body>
More code can be helpful in order to give you a more precise solution for your case, but I'll suggest this solution:
Remove the absolute positioning from your <svg>, and remove the z-index utilities from all classes. apply absolute to your text and define the position with absolute utilities such as top-24. Lastly, apply w-full to your text to maintain it at the center of the screen.
Because your text is absolute and your svg is a block, the text will be displayed on top of the svg.
<body class="relative">
<svg width="1100" height="500">
<circle cx="50" cy="50" r="400" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<div class="flex w-full items-center justify-center py-12 px-4 absolute top-24">some code here</div>
</body>
Tailwind-play
Related
I want to add my image to the top right corner but I am not able to add it. Pls help me in finding the error.
import Image from "next/image";
function Header() {
return (
{/* left */}
<div className='relative flex items-center h-10 cursor-pointer my-auto grid-cols-3 bg-black'>
{/* objectfit prevents from stretch of the image*/}
<Image
src='https://links.papareact.com/qd3'
layout="fill"
objectFit="contain"
objectPosition="left"
/>
</div>
{/* Middle */}
<div></div>
{/* Right */}
<div></div>
</header>
)
}
export default Header
Simply change the objectPostion: "right". Your image will be placed right
You have used flex so you can align to right by adding justify-end. Also you can make layout=responsive. And add className = "w-20 h-6" to either or a wrapping the image which gives the image proper size.
Here's the working code
<script src="https://cdn.tailwindcss.com"></script>
<div class='relative flex items-center justify-end h-10 cursor-pointer my-auto grid-cols-3 bg-black'>
<Image
src='https://links.papareact.com/qd3'
layout="responsive"
objectFit="contain"
objectPosition="right"
class="h-6 w-20 mr-2"
/>
</div>
<div></div>
<div></div>
I am trying to place my Image on the left side of the div.
Anything I try to do to move the Image or the div fail to work. Why is the Image stuck in the center?
I was able to achieve this using flexbox but had to switch to relative positioning because of the Nextjs Image component conflict. In the Image tag you'll see "layout='fill'" which was the root of my problem, but I am unable to rid myself of that piece of code
<div className="relative w-full bg-blue p-4 my-4 rounded-2xl lg:basis-5/12">
<Image className="float-left mr-4" src={"/"+icon} layout={"fill"} objectFit={"contain"} />
<div>
<h3>{ title }</h3>
<p>
{ paragraph }
</p>
</div>
</div>
What I am getting right now:
The float will not work with layout='fill'. Change it to either 'fixed' or 'intrinsic'. I recommend wrapping the Image tag into a div and making the div float. Try something like this.
<div className="bg-blue relative my-4 w-full rounded-2xl p-4 lg:basis-5/12">
<div className="float-left mr-4">
<Image src={'/' + icon} layout={'fixed'} height="120" width="120" />
</div>
<div>
<h3>{title}</h3>
<p>{paragraph}</p>
</div>
</div>
And to improvise it. You do not even need to use float. You can achieve same with flex. So if using float is not important you can do something like this
<div className="bg-blue my-4 flex w-full gap-4 rounded-2xl p-4 lg:basis-5/12">
<Image src={'/' + icon} layout={'intrinsic'} height="120" width="120" alt="" />
<div>
<h3>{title}</h3>
<p>{paragraph}</p>
</div>
</div>
friends I have got a problem to center an image over another image and centering in tailwind css.
<div className="w-1/6 h-11 relative text-center">
<span className="absolute left-0 right-0 w-full h-full">
<Image className="rounded-md" src="https://files.virgool.io/upload/users/785524/posts/sojszup8zfru/72bgkgkumdcq.jpeg" width="50" height="50" alt="video of" />
</span>
<span className="absolute">
<Image src="/svg/play.svg" alt="play video" width="25" height="25" />
</span>
</div>
and my result is :
or if set top and left in play icon
<span className="absolute left-1/2 top-1/2">
<Image src="/svg/play.svg" alt="podcast icon" width="25" height="25" />
</span>
the icon is on the bottom right
you see play icon is top left of the image and I want to be in the middle
thank you for your help
you may try this class object-center to the svg image
ref: https://tailwindcss.com/docs/object-position
or
add these classes to the parent div
flex-row content-center justify-center
you can try this code
<div class="relative">
<img class="object-cover opacity-25" [src]="course.img_src" alt="Card cover image">
<div class="absolute inset-0 flex justify-center items-center z-10">
<mat-icon svgIcon="heroicons_outline:lock-closed" class="icon-size-18"></mat-icon>
</div>
I am trying to change my standard <img/> to the NextJS <Image/> but I cannot find why my images are not rendered properly.
This is the basis tag
<div className=" mx-auto sm:w-9/12 lg:w-7/12 xl:w-8/12">
<img
className="object-fill rounded-md mx-auto sm:w-9/12 lg:w-full xl:w-8/12"
src={img}
alt="something"
/>
</div>
this works perfectly
While using the NextJS Image it does not work correclty
<div className=" mx-auto sm:w-9/12 lg:w-7/12 xl:w-8/12">
<Image
src={img}
layout="fill"
objectFit="contain"
alt="something"
className="rounded-md mx-auto w-full"
></Image>
</div>
All I can see it that the outer div of the <Image/> itself takes the width of the whole div (text + image) because the parent div of the <Image/> has apparently no width or height, while it has w-7/12.
You can try use a div as a container for style the Image component.
<div className=" mx-auto sm:w-9/12 lg:w-7/12 xl:w-8/12">
<div className="rounded-md mx-auto w-full">
<Image
src={img}
layout="fill"
objectFit="contain"
alt="something"
/>
</div>
</div>
I try to make a section that contains on a side some text and on the other side an Image that should be responsive (i.e. that becomes smaller when the window's size is also becoming smaller).
Using a simple <img src="/myimage.extension" alt="describe my image" /> does work perfectly. But as soon as I use the Next.JS Image component (in order to benefit from the optimization it does), it breaks the responsiveness.
Indeed, to make a kind of hero section with a responsive image I got this code (working perfectly fine):
<>
<div className={"h-screen py-0 py-20 text-center bg-blue-100 text-dark-blue"}>
<div
className={"flex flex-col items-center justify-center h-full md:flex-row app-container md:justify-between"}>
<div>
<h1 className={"text-red-400"}>With the Image component</h1>
<p>It doesn't resize on the size of the viewport</p>
</div>
<div className={"relative"}>
<svg
className={"absolute right-0 z-50 hidden w-1/2 sm:block"}
css={css`top: 25px;left: 25px;`}
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674 674"
>
<circle id="Ellipse_8" cx="337" cy="337" r="337" fill="#e23b58"/>
</svg>
<img
src={"/image.jpg"}
alt={"Some image description"}
/>
</div>
</div>
</div>
</>
Then, replacing the img tag by an Image component breaks the responsiveness: the image never becomes smaller. It keeps its size.
<>
<div className={"h-screen py-0 py-20 text-center bg-green-100 text-dark-blue"}>
<div
className={"flex flex-col items-center justify-center h-full md:flex-row app-container md:justify-between"}>
<div>
<h1 className={"text-red-400"}>With the Image component</h1>
<p>It doesn't resize on the size of the viewport</p>
</div>
<div className={"relative"}>
<svg
className={"absolute right-0 z-50 hidden w-1/2 sm:block"}
css={css`top: 25px;left: 25px;`}
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674 674"
>
<circle id="Ellipse_8" cx="337" cy="337" r="337" fill="#e23b58"/>
</svg>
<Image
src={"/image.jpg"}
alt={"Some image description"}
width={1103}
height={628}
/>
</div>
</div>
</div>
</>
You can see what's happening on this Sandbox. I'm looking for a way that enable me to control precisely how the Image component would be positioned.
The problem is not in the Image component. It's related to the styles applied to the div container.
If you remove items-center from the classes in lines 18-22 you will see that the image is resizing:
<div className={"flex flex-col items-center justify-center ...}>
Change to:
<div className={"flex flex-col justify-center ...}>