শুধুমাত্র সিএসএসের সাহায্যে চিত্রের উপরে কালো স্বচ্ছ ওভারলে রয়েছে?

Question 1

আমি যখনই কেবল সিএসএস দিয়ে মাউসটি ঘুরে বেড়াচ্ছি তখন আমি কোনও ছবিতে একটি স্বচ্ছ কালো ওভারলে যুক্ত করার চেষ্টা করছি। এটা কি সম্ভব? আমি এটি চেষ্টা করেছি:

http://jsfiddle.net/Zf5am/565/

তবে আমি প্রদর্শন করতে ডিভ পাচ্ছি না।

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <div class="overlay" />
</div> 

.image {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: red;
  z-index: 200;
}
.overlay:hover {
  display: block;
}

Question 2

আমি ওভারলে এলিমেন্টের জায়গায় সিউডো এলিমেন্ট ব্যবহার করার পরামর্শ দেব সিউডো উপাদানগুলি সংযুক্ত imgউপাদানগুলিতে যুক্ত করা যায় না , তবু আপনাকে অবশ্যই imgউপাদানটি মোড়ানো দরকার ।

এখানে উদাহরণস্বরূপ লাইভ করুন - পাঠ্যের সাথে উদাহরণ দিন

<div class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

সিএসএস হিসাবে, উপাদানটির উপর alচ্ছিক মাত্রা নির্ধারণ করুন .imageএবং তুলনামূলকভাবে এটি অবস্থান করুন। আপনি যদি কোনও প্রতিক্রিয়াশীল চিত্রের জন্য লক্ষ্য রাখছেন তবে মাত্রা বাদ দিন এবং এটি এখনও কাজ করবে (উদাহরণস্বরূপ) । এটি কেবলমাত্র লক্ষনীয় যে মাত্রাগুলি অবশ্যই উপাদানটির বিপরীতে পিতামণ্ডলের উপর থাকতে হবে img, দেখুন ।

.image {
    position: relative;
    width: 400px;
    height: 400px;
}

সন্তানের imgউপাদানটিকে 100%পিতামাতার প্রস্থ দিন এবং vertical-align:topডিফল্ট বেসলাইন প্রান্তিককরণের সমস্যাগুলি সংশোধন করতে যুক্ত করুন ।

.image img {
    width: 100%;
    vertical-align: top;
}

সিউডো উপাদান হিসাবে, একটি সামগ্রীর মান সেট করুন এবং .imageউপাদানটির সাথে সম্পর্কিত হয়ে একেবারে অবস্থান দিন । এর প্রস্থ / উচ্চতা 100%নিশ্চিত করবে যে এটি বিভিন্ন imgমাত্রার সাথে কাজ করে । আপনি যদি উপাদানটি ট্রানজিশন করতে চান 0তবে একটি অস্বচ্ছতা সেট করুন এবং স্থানান্তর বৈশিষ্ট্য / মান যুক্ত করুন।

.image:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

1ট্রানজিশনের সুবিধার্থে সিউডো এলিমেন্টের উপর ঘোরাঘুরি করার ক্ষেত্রে একটি অস্বচ্ছতা ব্যবহার করুন :

.image:hover:after {
    opacity: 1;
}

এখানে ফলাফল শেষ করুন

আপনি যদি হোভারটিতে পাঠ্য যোগ করতে চান:

সহজ পদ্ধতির জন্য, পাঠ্যটিকে সিউডো উপাদানটির contentমান হিসাবে যুক্ত করুন :

এখানে উদাহরণস্বরূপ

.image:after {
    content: 'Here is some text..';
    color: #fff;

    /* Other styling.. */
}

এটি বেশিরভাগ ক্ষেত্রে কাজ করা উচিত ; তবে আপনার যদি একাধিক imgউপাদান থাকে তবে আপনি একই লেখাটি হোভারে প্রদর্শিত নাও হতে পারেন। সুতরাং আপনি পাঠ্যটিকে একটি data-*গুনের মধ্যে সেট করতে পারেন এবং তাই প্রত্যেকের জন্যই অনন্য পাঠ্য থাকতে পারেimg উপাদানগুলির ।

এখানে উদাহরণস্বরূপ

.image:after {
    content: attr(data-content);
    color: #fff;
}

এর contentমান সহ attr(data-content), ছদ্ম উপাদানটি .imageউপাদানটির data-contentবৈশিষ্ট্য থেকে পাঠ্য যুক্ত করে :

<div data-content="Text added on hover" class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

আপনি কিছু স্টাইলিং যুক্ত করতে পারেন এবং এর মতো কিছু করতে পারেন:

এখানে উদাহরণস্বরূপ

উপরের উদাহরণে, :afterসিউডো উপাদানটি কালো ওভারলে হিসাবে কাজ করে, তবে :beforeছদ্ম উপাদানটি ক্যাপশন / পাঠ্য। যেহেতু উপাদানগুলি একে অপরের থেকে স্বতন্ত্র, আপনি আরও অনুকূল অবস্থানের জন্য পৃথক স্টাইলিং ব্যবহার করতে পারেন।

.image:after, .image:before {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:after {
    content: '\A';
    width: 100%; height:100%;
    top: 0; left:0;
    background:rgba(0,0,0,0.6);
}
.image:before {
    content: attr(data-content);
    width: 100%;
    color: #fff;
    z-index: 1;
    bottom: 0;
    padding: 4px 10px;
    text-align: center;
    background: #f00;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
    opacity: 1;
}

Question 3

CSS3 ফিল্টার

যদিও এই বৈশিষ্ট্যটি কেবল ওয়েবকিটে প্রয়োগ করা হয়েছে এবং এটির নেই doesn't ব্রাউজারের সামঞ্জস্য নেই তবে এটি একবার দেখার জন্য এটি মূল্যবান:

.image img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: .2s all;
}

.image img:hover {
    -webkit-filter: brightness(50%);
}

জেএসফিডাল ডেমো

তথ্যসূত্র

একই বিষয়

Question 4

আপনি বন্ধ ছিল. এটি কাজ করবে:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; }
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5); }
.image:hover .overlay { display: block; }

আপনি করা প্রয়োজন :hoverছবিতে, এবং .overlayযোগ করে কভার পুরো ইমেজ right:0;এবংbottom:0 ।

জেএসফিডাল: http://jsfiddle.net/Zf5am/569/

Question 5

এখানে ব্যবহারের একটি ভাল উপায়: অতিরিক্ত ওভারলে ডিভের পরিবর্তে চিত্র ডিভের পরে: http://jsfiddle.net/Zf5am/576/

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

.image {position:relative; border:1px solid black; width:200px; height:200px;}
.image img {max-width:100%; max-height:100%;}
.image:hover:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);}

Question 6

.overlay উচ্চতা বা প্রস্থ এবং কোনও সামগ্রী ছিল না এবং আপনি উপরের ঘোরাফেরা করতে পারবেন না display:none ।

আমি পরিবর্তে ডিভকে একই আকার এবং অবস্থান হিসাবে .imageএবং পরিবর্তনগুলি দিয়েছিRGBA মান করে।

http://jsfiddle.net/Zf5am/566/

.image { position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px; }
.overlay:hover { background:rgba(255,0,0,.7); }

Question 7

দেখুন আমি এখানে কি করেছো: http://jsfiddle.net/dyarbrough93/c8wEC/

প্রথমত, আপনি কখনই ওভারলেটির মাত্রা সেট করেননি, অর্থাত এটি প্রথম স্থানে প্রদর্শিত হচ্ছে না। দ্বিতীয়ত, আপনি যখন চিত্রটি নিয়ে যান তখন আমি ওভারলেয়ের জেড-ইনডেক্সটি পরিবর্তন করার পরামর্শ দিই। আপনার প্রয়োজন অনুসারে ওভারলে এর অস্বচ্ছতা / রঙ পরিবর্তন করুন।

.image { position: relative; width: 200px; height: 200px;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5}
.image:hover .overlay { z-index: 10}

Question 8

আপনি চিত্রটির অস্বচ্ছতা নিয়ে খেলে এবং চিত্রটির পটভূমির রঙ কালো করে সেট করে এটি অর্জন করতে পারেন। চিত্রটি স্বচ্ছ করে তোলার ফলে আরও গা dark় হবে।

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

সিএসএস:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; }
.image img { max-width: 100%; max-height: 100%; }
.image img:hover { opacity: .5 }

অন্যান্য ব্রাউজারগুলিতেও এই কাজটি তৈরি করতে আপনার ব্রাউজার-নির্দিষ্ট ধূসরতারও সেট করতে হবে।

Question 9

আমি আপনার চিত্রের আকারের ওভারলে ডিভকে ন্যূনতম উচ্চতা এবং ন্যূনতম প্রস্থ দিয়ে দেব, এবং হোভারের পটভূমির রঙ পরিবর্তন করব

.overlay { position: absolute; top: 0; left: 0;  z-index: 200; min-height:200px; min-width:200px; background-color: none;}
.overlay:hover { background-color: red;}