How to center and overlay mask an image in CSS? - html

How do I both horizontally and vertically center an image and mask it with thin black overlay? Something like this:
Here's my attempt:
<a href="/to" class="link">
<img src="/a.png">
<span class="mask" />
</a>
.link {
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 90%;
padding: 5px;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
}
But it does not work, https://ibb.co/NyWgdGY.

Few things.
<span> should have a closing tag. The correct way is <span></span>
You can use the ::before psudo element to create the mask. So the code is shorter and cleaner. Here's a jsFiddle Sample
.link {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 300px;
padding: 30px;
position: relative;
}
img {
width: 90%;
padding: 5px;
}
.link::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); // Try changing the 0.5 (e.g. 0.4)
}
<a href="/to" class="link">
<img src="data:image/jpeg;base64,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">
</a>

*{
box-sizing:border-box;
}
.link {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 300px;
padding: 30px;
position: relative;
}
img {
width: 90%;
padding: 5px;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
background: #ddd;
opacity: .5;
}
<a href="/to" class="link">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAsHCBYNExcWFRUWGBcXDxYNDxgNFhUYDxYPHRcdHR0XGhkgJTMqICIvIxkaKj4rLzU3Ojs6HihBRkA4RjM5OkMBDAwMEQ8RIBMTIEEuJy5AOjs3Pj03Qzc/Nz03QDc/Nz03N0M3Nz43Nzc9Nzc6Nzc3Nzc3Nz49Nzc3PTc4ODc3P//AABEIAOEA4QMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABAUCAwYBB//EAEIQAAIBAgIGBggEBQMDBQAAAAECAAMRBCEFEjFBUWEiMnGBkaEGE0JScrHB0WKC4fAUM3OSohUjssLx8hYkU2OD/8QAGgEAAgMBAQAAAAAAAAAAAAAAAAMBAgQFBv/EADMRAAIBAgQCCAYCAwEBAAAAAAABAgMRBBIhMUFRBRMiYYGh0fAycZGxweFCUhQjM/EV/9oADAMBAAIRAxEAPwD65ERABERABERABERABERABE8ZgNs1HEIPaXxErKUY/E7EpN7G6JEbSVMe1NLaXpj3j2AfUxDxlBfzX1LqlN7IsYlWdNruU+IgabXep8RK/wCfh/7/AH9Ceoqci0iQaelKZ94donv+ppz8Jb/Mof3X1K9VPkTYkdMYje0O/KbFqhthB7DHRqRkrxafydyri1ubIiJcgREQAREQAREQAREQAREQAREQAREQATF3Ci5NhIuKxwTIZnyH3lRisWznMzn4npCnS0jq/Je+4fToSmWWI0sqdUX/AHwkYaUZ7kWUDeQPrKq9zMsTUy1RsE40+kK8/wCVvlp+zWsPBaWN1bGXNybniZHbFc5CZ5jrzG23qzUqSRPXEmbabg7vKV9I3IvsJ1bybXxC01vuHWkFZRs9CTeaGNjmthuO4/aYJV1wGp9IHpbfZm6s9rZWuM4XFLRmtsSBxPdMP4rl5zKpTUgkZEDW/CZDZjY6u32dbq3k3Y2MYsmriOM3qgeQEN5Kwj9K15Ol9SslZaG+ni3o7CbcGzHhLTA6SWtkei3DceyUivrjPfNAbOasPjqlF6O65P8AHLw+gqdCM99zsYlBh9IOcixv85Kp45l2m/b95149K0ZPVNGOWHki1iacPiBUGW3eOE3TownGazRd0Jaa0YiIliBERABERABERABNGLqaiHOxtl28puY2EpcTXJzY/p2TFjcT1MLLd3G0oZ2Q6ryOxmw4hSbTx6fCeXvc6a03NKv0h+9si1KwpuVZrGodVNY5a9iQOV/nbjPNIa4VioJIGsdXrBeNtsrdenpPUWpdbgrrUzZlrix35EEN5iTCN9XsN21JeGqiogI2r/tuPaDjI3jF1PV7d/VPGaKPo5WokstUVOealk4Pcm54EG/ykTGrVp9Gojlb8D4g7j5RnVxcuy7otGaaJWB0sPWBGA1H6N/xjZLiwDawJBtqtn0Su64N+efOctR0YpuVqOL9LVqLezcQRaxl5h2a1mYHmt85FWMV8Iqd2WVPFftRf5TJsRfK4tv1vtKt0O0OBNblt9cD4R+sTkT4ilElaSxop0iEuSSF4nbc+QMhYbHqS2sdXUA1y2W0Z5SLi6ijbVc/0wFJ/MSSO60ocZXXWCIgUdpLd99/OaqVDMreY2Lyl3iNP6mtqbWPQLeygyvbifKWXo/XLrcnM3Xt4nznDs5ZtbYL6q62+2WQ3zsND4Z6NFqrAoFpN6vWyawBJcDid1+N87AFlelGELInMrMsGx49aUBzL6q/WSimWU43Q+K1sTTvvBbvJK/SdsomarT6uSRF7I1U6knU6lxIDJ07brBj5/aSxslEVlYnYKtquvPIy6nOJOhTYOwTvdE1G4yi+Fn9f/PuYMRGzTMoiJ1zMIiIAIiIAIiIAJz+KUEkDibdksMdidw2fOVjtczgdJ4mM5KnHhxNlCDWpTaSwxFmBII+Um01ZBbbzkirT1xZsxK//URhm9XV2C2o65jUOwONoO0X2G05KWbRG5yco2I9SuSxKtqunVPEHarDeMpGL06xKuvqqmuKhekBYva2sV33G8bZdMlOuL9FvxIc/EStx+iPWFSj6pX3he68Li37vGQaWjIumT8MXAGYfmnW71OYmz+J3HwlelF0Gdjbep+89OLYZN4OL/OKcEyjRMZxuy+HL5TE1yu+RRi13qPykj9INdDxHgftIyWK2JS43iB++2ZNUpP1lQ/EqlpXuy+8f7f1mlqqJ7RvxsBLZQykuvo7DP7IHNWI8r28pX/+m8Nra2u9+GspUdl1+d541cvlTRm55n9Jup6OqvtsvxH6CNTnH+ViyTJmFwWHw3SpoNf336T9zHZ2C0x0jVatSqIoLMyFbLm2c20cAEHSYtbuH7757UxlOmLayjkufyi9XK+5KWpRej/o29GolaswBRCoprZmuSTdiMsr7BftnSYjFJTtrHNuii72bgBOa0n6TPrrToJrMx2tmwXfZR8ybTboTRbo5rV3NSq3R23CDgP0yG7jNFVSfbqeC97LvfmWSuX6vvO0/u020TcyuxmLSghaowVR4luAG88paaMW9NWIsWAqW4XFwJmswnorkhUl7R6o7B8pS68n6Mr64IO7Z2H9+c6/RdSMKjhz/BhrptX5E6Iid4yCIiACIiACR8XV1RYbT8pIvKrEVbkmY8bX6unpuxlON2RcTUkNmm3FOOM1hZ5e922dGKsjOjUv2yu07gWcB6eboCrLt16R2rbeeXMzbiNZLldoB1Z5obTSYzWQdGonXRuF7ayneMx2XhC715Fn2XdHMCv6sh0JCndc3U8OyXeFxpcbb/FJOltApiQzIdRzt9xjuJG48x5yowFGphjq1UKkdU7UbsbYY+VpxvxJzJ7FqcTbdMP41NjXHxC/yni4o7j9ZkaiP10U81FjEacURmPAtCp7SDv1fI2mR0UD1XPkflNFTR1F+q7IfxZr5/eRauhagzQrUH4TY+By85dZeEvqRckYjQT/APzKo/En11pDbR4p5ti17KVJWbxubSLUwz0+sjDmym3jsmsPHKL538F6E6k4Ypk6tSo3Or6sf4qv1nraRqe+fy2HykRSvtNbkuczWqvsUmqH8Ws3ktoZFyDUNiWc2uzHhmzTbT0ZUqdc6i+Lnu3d83UGxR/l4cIPg1PHWImxtFYqt16iIPaGvbyUWPjIvbZpeNybpCmlHBg5qpPWLZ1T275C/wBdevV9ThqRd/eqZIo94gbuZI75Op+jdFM6tZmt0mFMao7zmfMSRorSNFWNLC0bIvSrVGyHAZ5lmNrZ238JVKFm/if0Xvu4kupf4SNivRoPVp1cRV1kpo1SsGyQkatgo3L1r8bDjLbC6WSuG9WDqqfV6zCwLWvkOGzbKb0o0i1QChTBZ6rhbL7ozPYMpO0Zgf4akq3uR0nPFzmT+9wEpNydNOXh8ufv8EqKavLcsVqE7ZO0ZUtUXnceX6CVimWOiEL1Qdy5n5D5y+EzddDLvde/pcTVSyu5fxET1xyxERABERADXX6p7DKlpcPsPYZTicbpTePj5WNFDiQsdS11I4iU2gtJH1hw9Q5i/qWbaQNqHsGY5A8BOiqLOI9J6TUK6umRuKgPAgzjQipScHx+5up9pWOtxNO4M4LRmK/hdIjcH1qJ7GGXmFnc6PxYxVFHX2h0hwcZEdxBlBi/RVa9dqpdkAK1KQSx6YNzrX3X4WhQlGDlGfFW8QjLSzOoR7i89YqRY2IO5urIFAtTWxOtbf8ApPVxQibyRDie1tEo+akofw5jwP0kSpouomyzD8JsfA/eTtYGLSetfIrcqWVkyZSPiBE20m4Sxt4cJpqYZdqix8j3QzphcJWYb/7s5k1Y71U/EJpQ7jMmMjiB42JtsVR8KiR62lGHtH8th8p6aZqGwyA2n6ds20lFPYg7faPfLaLcCIcTVfYjn4svmYArH2APiP2EsVrqeXxTOGbuGKKKfE6PrVl1TUVAetqqW+omzAaL/hqeoHNrlmKgAsTvJN+Q7pZkTWRLdZK1uHyLpI14TCJRJKr0j1mbNz3ndym+pUABJ2DfNbU3dTqEBiDqGoLi+6/KcxVxdRMKuuzesqYmtr620alk1bbAAV2DKEYub31v6v8AAKzZ02isQMUXIB1VIW9+s205brC3jLfCn1ZuuRlT6M0PV4Wnxe9Y95y/x1ZboJEZNVOy9hM3ct8PXFQcxtE3SqwtTVcc8jLWepwWIdaneW60fv3xOfUhlYiImwWIiIAJT4hNRyOd17JcSFpGjrLrDaNvZMPSFJ1KV1utfX18BtGVpWIJnO+mGE16OtvQ/wCJynQK014vDisjIdjAr4755z+SkuBti8rucd6EaRs7UGOT/wC5S+MDMd4F+4zqmafPtI4GtoysrEW1XDUnX+U9s7X+YOc6+pjg9NHGxwKi/CwvLYqn2lOO0vfvxGTV3dG+obG0jVqd8wbHj954K+vPbxCuhsVdGhMW1M2fZx9n9JPo4oPvkZl1pFfDFM0NuXs/pJajLfQpKmXQae3lRSxpTJxY/wCJ7DJtPFAykqbQpoyxQtZvyn6GR6tXKSKhDqV4jz3SrwVXXfPYvSPbew+vhLwjdX5Ai1ppqAD+74t8PNLYjs8u+R6mK5yHTdwTubarCQK2kTR6p7tqnum1KT1+qLL7zdXuG+TMNoxKefWb3m63dwjFljvqXRhgsa9QXemF4dI3P5bZeMm0qRbNvCZKgWKlTUEU9WSzPXznK+lwNbE0aK5EgW7aj2v5X8ZfLXF9shUsL6/SRe3Ro4ZF/wD1bWsPBmPhLUnkm5vgm/HZfcrF2dzoaVMABRsUBV+ECwm8TFFtPZFONlqLZmm0dol1K3R9G51jsHV5mWU9H0XTcabm+O3gZKzu7CIidMSIiIAIiIAU+Mw/qjcdU7OU0gy7dAwscwZWYnBmnmM18xPP47Aum3Omuzy5fr7fI10qqektyNVprUUq6hlPRKuAQe0GVeK0EvqwlJtQLsWpcpvyvtAz5y0Bnt5zFIfqjk6mFq0D00NveXpJ4jZ32m7D4kOOdvG15095GxGjqVTrIt+K9E+Izl3JNaovGpZlQGgGTKmhvcqMOVQB18RY+cjPo+snso/9NrN4EAecrccqkHxMGpg7Rf8AYmk4Rh1D3Nflvm7UcdZHH5b+YuPOScMQYKo4kSimiseu9PrqRz3eIy4yA2KWmzWPXb1m3kAcu0E9869VEx9Wo2AX7BLRqpcPP9CbHO4ajUrbFIFus/RG7vPdLPD6PVM26R/Fs3bB97yazTUzyHVvsWULmRaea8wvMhSY7LD4vtvinJF7KJ5VrhBdjYfPkJT4jHmo1gCTuVQSfAS3GiFc61Rmc8GOqg7AJOoYdKYsihR+EAf95MZRXf5FHJFJgdG1XIZxqL+Lr/2j62l3hsKlHW1Rmx1nLdYtYC57lA7psE3UsOz7Blx2Dxl0pVJWirvuQty5mF5vwuGNTkvH7STQwAXNsz5SaJ1cN0W281b6ev68jNOtwiYooAsNgmURO4lbRGYRESQEREAEREAEREAK/SWG6OsBmOtzErVqCdFKDSWGNBrjqts5cp5/pXCuD6+G3H19fB82aqFS/ZZjrjjBqjjI5nk43WMeb2xA5zA4k7hNUSHNgZNUY7/7cpgRxmU9tK7gVOlXr4Ya9Ml1HXRhrFea2zI+Xy3YKpWcA1Qi33KSWHaNg8ZYTRaxtu3faMz3ja2vMtmZsGHJ3zJcJMEYjYZn/ENy8JW/Nk5mbVoATMJNH8S3Aef3nhrt2Q7JBKmt64GzORiSdpnoEHMCVhFau4Xd1jbcJ0Ki2UiaNwvqlz6x2/QSZPU9G4V0Kd5fFLV93JeBhqzzPTYREToihERABERABERABERABExdgouZBr4ovkMh84upVjDcrKSiSauJC7MzImIc1QQ2zhPEBOwE9gJmfqGPs+Y+8S3Kas1oxalJ6opqtM0zbaOM8BlxU0ezix1bdp+0iNoRx1WXsN/nacLE9FVIu9JXXLivX7m+liM2k9GQomeJw7USA4tfq5gk222moNOZOEoSyyVmaE77Gc9mF57eVAymuolxz9n4pleea0gDWjXEymDGx5H5z3WlmBlF5gWmylSZzkO8bJMISm8sVdkNpK7MRLrRejtTpOOluHDmec04XCilntbjw7JaUK2vkdvznfwHR3VyVSrvwXL59/ku97ZKmIUuzE3RETtihERABERABERABERABNdasKYuZhicQtFdZj+EDeSdgA4yPQoNUOvUHwL7o58+UXOT+GO/2+f4XH5alW+C3PFVq5ucl3foN/bJNLCqm654tnN8SIUYx1er5sFBLURERpYREi6SqalJjyt4m31lZyyxbIbsrnI+kwOKqa2dl6NPkePbKdcfXw2/1i8KnW7mGfjedG660g4jCAzkVIRqfErmJVJwlmiyBS9K6WyoroewuniuflJ+H0xQrdStTPLXAPgc5TY7RAfdKLG4EURqgdsy/wDz6U32W15+/qa4dIS/krn0BaynYwPeJhUxSp1nUfEwHzM+X1dGip0gBcdF8h1dx+nhPaWjDw8pR9GJPWfl+x3+auXn+j6DitP4ZAb10P8ARPrDfsW83eiOk00pUqIQyFAGTMHXS9idmRGWWe2cNh9EnhOh9H6JwdZKg9k58wciPCOpYShTd5dr5+nrcVPHN7aH0ehoynT2Lc8Xz8pm+AQ5gap4pl4jYfCSEYMARsIuJlO5ClCCyxSS7kXk825W1abU9uY94bO8bvlNRqWzvLeVGkcJqDWXq7x7vMcuW6KrQaV0Z6kLK6LLD1fWKD49s2ys0NU6y/m+h+ks42lLPFMbCWaNxERGFhERABERABERADAoCQSBcbDvHGZxEAEREAEREAErtPtaj+dfnLGQNOUy9BwNoAfwYH5CLrK9OSXIpU+B25HPLUmV5XpWmwV5x1I5qqFxobBCpU1iOinm52eAz8Jw/pBhfV1HU7nK+BncYbGGjXw+GS1zr1cVvt/tsQncdXwHOUfp3hLVi3voG+h+U2uOWmu56+PtIfUjaCfJ6+Jx+C6Dg2uN44g7ROgp4Jdo2HpKflKPD0+lOzoYApQpvua69hBNvGx8ImrHMrrgK3K5MNbdN6UZICT20RsTY6jQVXXoLxW6eGzyIlhKT0ZfKoOat43B+Ql3Oth5ZqaZvpu8UJ4c57EcXKfB0/U1ym7O3YRcfbulxIFVP/cUzxpt5f8AlJ8VSjlTXf6C6atdd4iIjRgiIgAiIgAiIgAiIgAiIgAiJi7hQSTYDaYAZTxiN9u+c7pHTLMStM6q8R1j9pUtmbnM8WzMxzxkYvsq/kZZ4tJ9lX8iw0n6NsCWo5g9LU2MOQO8TnsXUagG1lIKjYwIMtsPWekboxX4Tl3jYZe4TEJjlKVVVmA6QYZEcRwmdRp1X2ey/IzKEKr7Oj8jn/QDDtXqVcS97W9RS1t5Ju7eSi/MyT6eU+ofwEeB/WdTh6C0lCIAqqLKFFgJzvpwOjT/AD/9M1VIZKNve5pqxy0be9zhsMnS759NweFFTCInFBqng17g+M+c4Zel3z6foz+TT/pj5SmHs20Lw1m3fkcmbg2ORB1SOBGRExJlj6Q4f1dXWGxxrfnGR+h8ZVl5iqQcJOPIpLstplz6NN/uMONPW8D+s6Kc16L9Kox4J8yPtOlnRwitTNdDWAiImkcQwdfEH/66Q/ucn6KPGTJpp0AjMw2uQx7lAA8vObpCISEREkkREQAREQAREQAREQAREQATntNY/XOqp6I8zxlzjUZkIXae7KUraCqtvUd5+ky4nO1lgjPiM7WWKKiZqssx6P1B7S+LfaP9Gqjcp/N95h6ip/UxdTP+pXakzo1TRYONqnW+479knf6VV9z/ACX7zIaHqMDdQOWt0jyyykqjPgn9CypT4Iv0e4BG8AznfTQ9FPzedvtL7D1hUUEZbiN4O9TzE530tNz2Kq95z+om/Ev/AFM14l/6mclh16ffPpmj/wCUnwD5T5rQHT759LwP8pP6a/8AERWE4icHuyJ6Q0PWUG4raoO7b5XnHmpPoLoHBB2EFT2T57gsI9apqKLnWKk7hY2JPKRioXkmuIYqLzJridL6JUug7n2mCDsX9T5S/mjBYcUEVBsUW7eJ7zczfNdOGSKRrpxyRURERLlxERABERABERABERABERABERABERABERABERABERACJhf5tbtT/jOf9KOs/wASf8RETHiP+fi/yZMR/wA/F/dnM0OtPpOB/lU/6a/8RESuE4lMHxJE570V69b4/wDqaexNUvjj4mmfxx8fsdBERGDRERABERABERABERABERAD/9k=">
<span class="mask" > </span>
</a>

Related

How to use ::before to make a shadow on top of a div with an image

I have this small image and i want to repeat so that it looks like a shadow on top of my div that it's like a cookies notification. How can i position it on top of my div cookieConsent like a shadow on the top?
THE IMAGE:
#cookieConsent {
width: 100%;
background-color: #474540F2;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
z-index: 9999;
}
.cookieContainer {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.cookieConsent-txt {
color: #FFFFFF;
width: calc (100% - 101px);
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
display: inline-block;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies
</p>
<a class="cookieConsentOK">Aceitar Cookies</a>
</div>
</div>
You don't need to use an image for this, you can use the box-shadow properties and negative values - specifically the y and spread properties.
#cookieConsent {
width: 100%;
background-color: #474540F2;
position: fixed;
bottom: 50px;
left: 0;
right: 0;
z-index: 9999;
box-shadow: 0px -4px 10px -2px rgb(0, 0, 0,0.4);
}
.cookieContainer {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.cookieConsent-txt {
color: #FFFFFF;
width: calc (100% - 101px);
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
display: inline-block;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies
</p>
<a class="cookieConsentOK">Aceitar Cookies</a>
</div>
</div>
If you need to use an image, set the image as a background on a pseudo element:
#cookieConsent::before {
content: '';
display: block;
background-image: url(https://via.placeholder.com/10);
background-repeat: repeat-x;
width: 100%;
height: 10px;
position: absolute;
left: 0;
top: -10px;
}
#cookieConsent {
width: 100%;
background-color: #474540F2;
position: fixed;
bottom: 50px;
left: 0;
right: 0;
z-index: 9999;
}
#cookieConsent::before {
content: '';
display: block;
background-image: url(https://via.placeholder.com/10);
background-repeat: repeat-x;
width: 100%;
height: 10px;
position: absolute;
left: 0;
top: -10px;
}
.cookieContainer {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.cookieConsent-txt {
color: #FFFFFF;
width: calc (100% - 101px);
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
display: inline-block;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies
</p>
<a class="cookieConsentOK">Aceitar Cookies</a>
</div>
</div>

Can a pseudo-element act as a block element without overlap?

I have three 50x50 colored blocks with content R, G, and B. Can these blocks be lined up vertically as would be expected if they were three div elements adjacent to each other?
It is possible if using a margin-bottom that is the same height of the red block but only if the red block does not contain any text. This is because the height of the text gets added to the height of the margin.
Is there a way to make this work with just .red, .red::after, and .blue?
body {
width: 100%;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.demo-container {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
border: solid 1px #d5d9dc;
}
.red {
background: pink;
display: block;
min-width: 50px;
height: 50px;
position: relative;
}
.red::after {
content: "G";
background-color: rgba(64, 255, 64, 0.5);
display: block;
min-width: 50px;
height: 50px;
position: relative;
}
.blue {
background-color: rgba(64, 64, 255, 0.5);
display: block;
min-width: 50px;
height: 50px;
position: relative;
}
<!DOCTYPE html>
<div class="demo-container">
<div class="container">
<div class="red">R</div>
<div class="blue">B</div>
</div>
<br/>
</div>
You can add position: relative;height: 100px to .red element.
then add: position: absolute; bottom: 0; to .red:after element
body {
width: 100%;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.demo-container {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
border: solid 1px #d5d9dc;
}
.red {
background: pink;
display: block;
min-width: 50px;
height: 100px;
position: relative;
}
.red::after {
content: "G";
background-color: rgba(64, 255, 64, 0.5);
display: block;
min-width: 50px;
height: 50px;
position: absolute;
bottom: 0
}
.blue {
background-color: rgba(64, 64, 255, 0.5);
display: block;
min-width: 50px;
height: 50px;
position: relative;
}
<!DOCTYPE html>
<div class="demo-container">
<div class="container">
<div class="red">R</div>
<div class="blue">B</div>
</div>
<br/>
</div>

Prioritising two absolute elements

I have two absolute elements, which overlap. I would like to have one to show above the other. In the below example, I want the pink figure with text to show above the pseudo-element created with ::before.
I've tried the z-index, but it doesn't seem to help.
Any ideas?
.navbar {
display: flex;
}
.lightbox {
display: none;
margin: auto;
}
.links {
flex: 1;
text-align: center;
display: block;
}
.lightbox:target {
display: flex;
position: absolute;
top: 0;
width: 100%;
height: 100%;
color: black;
left: 0;
align-items: center;
justify-content: center;
}
#close_button {
position: relative;
display: block;
}
.lightbox #close_button::after {
content: "x";
color: white;
position: absolute;
align-items: center;
justify-content: center;
right: -1rem;
top: -1rem;
z-index: 2;
width: 2rem;
height: 2rem;
background: black;
border-radius: 50%;
cursor: pointer;
display: flex;
}
figcaption {
z-index: 1000;
background: lightpink;
width: 25rem;
text-align: center;
}
#close_button::before {
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,.7);
height: 100%;
width: 100%;
content: "";
border: solid red;
position: fixed;
}
<div style="height: 200px; background: lightgreen;">
<nav class="navbar">
<a class="links" href="#text1">Open example 1</a>
<a class="links" href="#text2">Open example 2</a>
</nav>
<br><br>
<div class="lightbox" id="text1">
<figure>
<figcaption>
Ipsum lorem ...
</figcaption>
</figure>
</div>
<div class="lightbox" id="text2">
<figure>
<figcaption>
Some latin text in textbox2 ...
</figcaption>
</figure>
</div>
</div>
For z-index to work element has to have a position other than static. In your case element needs to have position: relative
.navbar {
display: flex;
}
.lightbox {
display: none;
margin: auto;
}
.links {
flex: 1;
text-align: center;
display: block;
}
.lightbox:target {
display: flex;
position: absolute;
top: 0;
width: 100%;
height: 100%;
color: black;
left: 0;
align-items: center;
justify-content: center;
}
#close_button {
position: relative;
display: block;
}
.lightbox #close_button::after {
content: "x";
color: white;
position: absolute;
align-items: center;
justify-content: center;
right: -1rem;
top: -1rem;
z-index: 2;
width: 2rem;
height: 2rem;
background: black;
border-radius: 50%;
cursor: pointer;
display: flex;
}
figcaption {
z-index: 1000;
background: lightpink;
width: 25rem;
text-align: center;
position: relative;
}
#close_button::before {
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,.7);
height: 100%;
width: 100%;
content: "";
border: solid red;
position: fixed;
}
I have following example: https://codepen.io/elenaoat/pen/NzdVda?editors=1100
When you click on the buttons you will see some text popping up. I cannot figure out how to get the text in the figcaption to be "above" the pseudo-element created with before. Right now the pseudo-element covers the whole window, which is fine, but I want the pink div with the text to show above it, so it's not greyed out.
<div style="height: 200px; background: lightgreen;">
<nav class="navbar">
<a class="links" href="#text1">Open example 1</a>
<a class="links" href="#text2">Open example 2</a>
</nav>
<br><br>
<div class="lightbox" id="text1">
<figure>
<figcaption>
Ipsum lorem ...
</figcaption>
</figure>
</div>
<div class="lightbox" id="text2">
<figure>
<figcaption>
Some latin text in textbox2 ...
</figcaption>
</figure>
</div>
</div>
Add position: relative to figcaption and also changed z-index on the after element and the figcaption.
z-index property only works on fixed, absolute or relative divs. So thats why you need the relative position on figcaption and even z-index:2 will work in that case. No need of 1000 value. Similarly, you need just one higher value for the after close icon. So zindex 3 will also work.
.navbar {
display: flex;
}
.lightbox {
display: none;
margin: auto;
}
.links {
flex: 1;
text-align: center;
display: block;
}
.lightbox:target {
display: flex;
position: absolute;
top: 0;
width: 100%;
height: 100%;
color: black;
left: 0;
align-items: center;
justify-content: center;
}
#close_button {
position: relative;
display: block;
}
.lightbox #close_button::after {
content: "x";
color: white;
position: absolute;
align-items: center;
justify-content: center;
right: -1rem;
top: -1rem;
z-index: 3;
width: 2rem;
height: 2rem;
background: black;
border-radius: 50%;
cursor: pointer;
display: flex;
}
figcaption {
position: relative;
z-index: 2;
background: lightpink;
width: 25rem;
text-align: center;
}
#close_button::before {
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,.7);
height: 100%;
width: 100%;
content: "";
border: solid red;
position: fixed;
}
<div style="height: 200px; background: lightgreen;">
<nav class="navbar">
<a class="links" href="#text1">Open example 1</a>
<a class="links" href="#text2">Open example 2</a>
</nav>
<br><br>
<div class="lightbox" id="text1">
<figure>
<figcaption>
Ipsum lorem ...
</figcaption>
</figure>
</div>
<div class="lightbox" id="text2">
<figure>
<figcaption>
Some latin text in textbox2 ...
</figcaption>
</figure>
</div>
</div>
Try setting the figcaption position to relative.

Changing the background image of a circle

I am trying to draw a number of CSS generated circles that have images as background. In my current code, the background image is set as a fixed image in the CSS code.
.container {
text-align: center;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
overflow: hidden;
text-decoration: none;
border: 0;
margin: 10px;
}
.circle:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url("http://deepchains.com/images/team.png") center / cover no-repeat;
opacity: .25;
transition: .25s;
}
.circle:hover:after {
opacity: 1;
color: transparent;
}
.circle:hover {
color: transparent;
}
.ccont {
display: inline-block;
margin: 10px;
}
.ccont:hover {
color: transparent;
}
<div class="container">
<a class="circle" href="http://www.url1.html">
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text1</div>
</a>
<a class="circle" href="http://www.url2.html">
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text2</div>
</a>
</div>
Here is a sample result that I see in Chrome Browser:
My question is how to change the background images of each circle separately in the HTML code? I will have a number of these circles that I like them to be aligned and in the same line, and I want to set their background images in the HTML code and remove the background image from the CSS. How can I do that?
An easy solution is to transform your peudo element to an element and use background-image as inline style so you can easily change the image for each element and apply all the same properties as the pseudo element:
.container {
text-align: center;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
overflow: hidden;
text-decoration: none;
border: 0;
margin: 10px;
}
.circle .image {
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
opacity: .25;
transition: .25s;
}
.circle:hover .image {
opacity: 1;
color: transparent;
}
.circle:hover .ccont{
color: transparent;
}
.ccont {
display: inline-block;
margin: 10px;
}
<div class="container">
<a class="circle" href="http://www.url1.html">
<span class="image" style="background-image: url(http://lorempixel.com/400/300/)"></span>
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text1</div>
</a>
<a class="circle" href="http://www.url2.html">
<span class="image" style="background-image:url(https://lorempixel.com/400/200/)"></span>
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text2</div>
</a>
</div>
Simply set up the background image on the pseudo to be inherited from parent, set the size on parent to 0 to hide it there, and finally, set style="background-image: url(...)" in the markup.
Updated
You can even drop the inner div and still achieve the same effect
Stack snippet
.container {
text-align: center;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-weight: bold;
text-decoration: none;
border: 0;
margin: 10px;
background-size: 0; /* hide image by set its size to 0 */
}
.circle:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: inherit; /* inherit from parent */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: .25;
transition: .25s;
}
.circle:hover:after {
opacity: 1;
}
.circle:hover {
color: transparent;
}
<div class="container">
<a class="circle" href="http://www.url1.html" style="background-image: url(https://picsum.photos/300/300?image=1070);">
This is <br>Text1
</a>
<a class="circle" href="http://www.url2.html" style="background-image: url(https://picsum.photos/300/300?image=1072);">
This is <br>Text2
</a>
</div>

how to stretch selected menu item to the left edge of the window?

I have a block with several items. When I click on the menu item it is highlighting and extending to the left border of the window.
I did this with the help of an absolutely positioned element, and set the width to 1000px, but this option does not work. This red bar should rest against the edge of the window at any resolution.
html
<div class="flex-menu-area">
<div class="container">
<div class="flex-menu">
<div class="left-flex-column">
<div class="flex-menu-select"><span>item 1</span></div>
<div class="flex-menu-select"><span>item 2</span></div>
<div class="flex-menu-select"><span>item 3</span></div>
</div>
<div class="right-left-column">
<div class="object"><span>item1content</span></div>
<div class="object"><span>item1content</span></div>
<div class="object"><span>item1content</span></div>
<div class="object"><span>item1content</span></div>
<div class="object"><span>item1content</span></div>
</div>
</div>
</div>
</div>
css
.flex-menu-area {
background: #fff;
width: 100%;
height: 512px;
.flex-menu {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 100%;
.left-flex-column {
max-width: 256px;
width: 100%;
outline: 1px solid gray;
height: 512px;
.flex-menu-select {
font-size: 20px;
line-height: 26px;
font-weight: 600;
text-align: left;
color: $text-color;
padding-top: 43px;
padding-bottom: 43px;
max-width: 100%;
border-bottom: 1px solid gray;
position: relative;
&:hover {
background: #ccc;
&:before {
position: absolute;
width: 1000px;
height: 100%;
content: "";
display: block;
top: 0px;
left: -1000px;
background: red;
}
}
}
}
.right-left-column {
outline: 1px solid gray;
height: 512px;
width: 884px;
background: #fff;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #eee;
.object {
outline: 1px solid red;
font-size: 20px;
line-height: 40px;
}
}
}
}
Solution:
&:before {
position: absolute;
width: 100vw;
right: 0;
height: 100%;
content: "";
display: block;
top: 0px;
background: #fff;
z-index: -1;
}
Set the width and left values of your &:before to:
width: calc((100vw - 100%) /2);
left: calc(0 - ((100vw - 100%) /2));
I think that should help, but I don't have access to a screen large enough to test right now so apologies if my calcs are slightly off.